ทำให้หน้าเว็บของคุณมีชีวิตชีวาด้วย CSS Animations and Transitions

เผยแพร่แล้ว: 2017-10-09

การออกแบบเว็บไซต์มีการพัฒนาอย่างต่อเนื่อง ตั้งแต่การออกแบบที่ตอบสนอง รูปแบบตัวอักษรที่สวยงาม โครงร่างสีที่สมบูรณ์แบบ ภาพประกอบ ผู้สร้างเว็บไซต์ต่างคิดค้นแนวคิดและการออกแบบใหม่ๆ ทุกวัน

ผู้ใช้ในปัจจุบันมีความคาดหวังสูงเกี่ยวกับอินเทอร์เฟซผู้ใช้เนื่องจากเนื้อหาคุณภาพสูงดังกล่าวมีอยู่ในอินเทอร์เน็ต เนื่องจากส่วนต่อประสานเว็บไซต์กำลังพัฒนา เทคโนโลยีที่อยู่เบื้องหลังนั้นก็พัฒนาขึ้นเช่นกัน องค์ประกอบหลักอย่างหนึ่งที่รับผิดชอบในการปรับปรุงส่วนต่อประสานเว็บไซต์คือ CSS

CSS หรือ Cascading Style Sheets มีหน้าที่ทำให้ไซต์โต้ตอบได้มากโดยกำหนดสไตล์ เลย์เอาต์ การออกแบบ มาตรฐานล่าสุดสำหรับ CSS นั่นคือ CSS3 ได้แนะนำแนวคิดของ แอนิเมชั่น และ การแปลง ซึ่งปรับปรุงประสบการณ์ผู้ใช้โดยการเพิ่มความลึกพิเศษให้กับส่วนต่อประสานผู้ใช้ ด้วยภาพเคลื่อนไหวและการเปลี่ยน CSS คุณสามารถบอกเล่าเรื่องราว สร้างเอฟเฟกต์ที่หรูหรา และทำให้ผู้ใช้โต้ตอบกับเว็บไซต์ของคุณได้อย่างมีประสิทธิภาพและมีความหมายมาก

แอนิเมชั่นเป็นเพียงการจำลองการเคลื่อนไหวซึ่งสร้างขึ้นโดยการแสดงชุดของวัตถุต่างๆ เช่น รูปภาพทีละภาพ ในทางกลับกัน การเปลี่ยนผ่านนั้นเป็นกระบวนการที่วัตถุเปลี่ยนจากสถานะหนึ่งไปอีกสถานะหนึ่ง แต่เมื่อเราพูดถึงแอนิเมชั่นบนเว็บ โดยทั่วไปแล้วจะมีสามประเภท – แอนิเมชั่น CSS หรือแอนิเมชั่นคีย์เฟรม, การเปลี่ยน CSS และ ภาพเคลื่อนไหว JavaScript

ภาพเคลื่อนไหว CSS

ในการสร้างภาพเคลื่อนไหวใน CSS เราจำเป็นต้องเปลี่ยนคุณสมบัติ CSS ขององค์ประกอบ เช่น รูปภาพหรือข้อความ ในช่วงเวลาหนึ่ง เราสามารถเปลี่ยนคุณสมบัติขององค์ประกอบได้หลายครั้งตามต้องการและกำหนดระยะเวลาของแอนิเมชั่นได้เช่นกัน

การระบุ @keyframes

ภาพเคลื่อนไหว CSS ถูกกำหนดบิตด้วยคีย์เฟรม คีย์เฟรมเหล่านี้เป็นจุดกึ่งกลางของแอนิเมชัน ภาพเคลื่อนไหว CSS ทั้งหมดถูกระบุภายใต้กฎ @keyframes คีย์เฟรมเหล่านี้ระบุสิ่งที่เกิดขึ้นกับองค์ประกอบในช่วงเวลาหนึ่งๆ นั่นคือ

  • คุณสมบัติอะไรที่เปลี่ยนแปลงไป
  • เมื่อองค์ประกอบเคลื่อนไหว
  • องค์ประกอบเคลื่อนไหวอย่างไร

คุณสามารถกำหนดคีย์เฟรมของคุณเองได้ดังนี้:

@keyframes animation_name
{
from{ property: value; }
to{ property: value; }
}

ที่นี่ 'ถึง' และ 'จาก' ระบุจุดเริ่มต้นและจุดสิ้นสุดของภาพเคลื่อนไหว นอกจากนี้เรายังสามารถระบุภาพเคลื่อนไหวสำหรับช่วงเวลาระหว่างจุดเริ่มต้นและจุดสิ้นสุดได้ดังนี้:

@keyframes name
{
0%{ property: value; }
50%{ property: value; }
100%{ property: value; }
}

ในที่นี้ 0% หมายถึงจุดเริ่มต้นของภาพเคลื่อนไหว 100% หมายถึงจุดสิ้นสุดของภาพเคลื่อนไหว และ 50% หมายถึงการเปลี่ยนแปลงระหว่างจุดเริ่มต้นและจุดสิ้นสุด แต่เราจะบอกเบราว์เซอร์ว่าควรให้แอนิเมชั่นแสดงเวลานานเท่าใด เราทำสิ่งนี้ด้วยความช่วยเหลือของ คุณสมบัติแอนิเมชั่น บางอย่าง คุณสมบัติแอนิเมชั่นเหล่านี้เชื่อมโยงกับองค์ประกอบที่จะเคลื่อนไหว ตัวอย่างเช่น:

element_name
{
animation_property: value;
style_property: value;
}

องค์ประกอบที่นี่อาจเป็นแท็ก HTML เช่น div, span, img, p เป็นต้น และ style_property คือคุณสมบัติการจัดสไตล์ CSS ใดๆ เช่น background_color, width, height เป็นต้น ให้เราดูรายละเอียดคุณสมบัติของแอนิเมชั่นบางส่วน

  1. @keyframes : คีย์เฟรมใช้เพื่อระบุโค้ดแอนิเมชั่นตามที่กล่าวไว้ข้างต้น
  2. animation-name : ชื่อที่ระบุด้วย @keyframes คือชื่อของแอนิเมชั่น ชื่อนี้ใช้เพื่ออ้างอิงคีย์เฟรมที่มีองค์ประกอบที่จะเคลื่อนไหว
  3. animation-duration : ใช้เพื่อระบุระยะเวลาของภาพเคลื่อนไหวเป็นวินาทีหรือมิลลิวินาที ตัวอย่างเช่น หากเราตั้งค่าเป็น 5 วินาที แอนิเมชั่นจะทำงานเพียง 5 วินาทีเท่านั้น หากเราไม่ตั้งค่าคุณสมบัตินี้ แอนิเมชั่นจะไม่ทำงานเลย เนื่องจากค่าเริ่มต้นของมันคือ 0
  4. animation-delay : เราสามารถชะลอการเริ่มแอนิเมชั่นโดยระบุเวลาหน่วงของแอนิเมชัน ตัวอย่างเช่น หากคุณต้องการเริ่มแอนิเมชั่นหลังจากโหลดหน้าในเบราว์เซอร์ 5 วินาที ให้ตั้งค่าการหน่วงแอนิเมชั่นเป็น 5 วินาที
  5. อนิเมชั่น-ทิศทาง : เราสามารถบอกเบราว์เซอร์ว่าแอนิเมชั่นเคลื่อนที่ในทิศทางย้อนกลับหรือสลับกันด้วยคุณสมบัตินี้ ตัวอย่างเช่น หากคุณต้องการให้แอนิเมชั่นทำงานตั้งแต่ต้นจนจบ ให้ตั้งค่าของแอนิเมชั่น-ระยะเวลาเป็น 'ปกติ' หากคุณต้องการให้มันทำงานตั้งแต่ต้นจนจบ ให้ตั้งค่าเป็น 'ย้อนกลับ'
  6. animation-fill-mode : เราสามารถระบุรูปแบบขององค์ประกอบเมื่อภาพเคลื่อนไหวไม่ได้เล่นด้วยโหมดนี้ เช่น เมื่อภาพเคลื่อนไหวล่าช้าหรือเสร็จสิ้นแล้วรูปแบบขององค์ประกอบควรเป็นอย่างไร
  7. animation-iteration-count : จำนวนครั้งที่สามารถเล่นแอนิเมชั่นได้แสดงโดยพร็อพเพอร์ตี้นี้ ตัวอย่างเช่น หากคุณต้องการเล่นแอนิเมชั่นเมื่อตั้งค่าเป็น 1 หรือหากคุณต้องการให้แอนิเมชั่นเล่นตลอดไป ให้ตั้งค่าเป็น 'อนันต์'
  8. animation-timing-function : คุณสมบัตินี้ใช้เพื่อระบุเส้นโค้งความเร็วของแอนิเมชั่น เช่น เชิงเส้น การเร่งความเร็ว หรือการลดความเร็ว
  9. แอนิเมชั่น : เป็นคุณสมบัติชวเลขสำหรับการตั้งค่าคุณสมบัติแอนิเมชั่นทั้งหมด

ตัวอย่างเช่น คุณสามารถทำให้วัตถุที่ตีกลับเคลื่อนไหวได้ด้วยข้อมูลโค้ดต่อไปนี้ สังเกตว่ามีการใช้สัญกรณ์ชวเลขสำหรับแอนิเมชันอย่างไรที่นี่

@keyframes slide {
 0% {
  left: 0;
  top: 0;
 }
 50% {
  left: 244px;
  top: 100px;
 }
 100% {
  left: 488px;
  top: 0;
 }
}

.stage:hover .object {
 animation: slide 2s linear;	/*shorthand animation property*/
}

.object {
 background: #2db34a;
 border-radius: 50%;
 height: 50px;
 position: absolute;
 width: 50px;
}

การเปลี่ยนผ่าน

การเปลี่ยน CSS ใช้กับคุณสมบัติขององค์ประกอบในช่วงระยะเวลาหนึ่ง โดยอิงตาม ฟังก์ชันการกำหนดเวลา บางอย่างหรือที่เรียกว่าฟังก์ชันการค่อยๆ เปลี่ยน โดยฟังก์ชันจับเวลา เราหมายถึงฟังก์ชันที่จะเปลี่ยนคุณสมบัติขององค์ประกอบจากสถานะหนึ่งไปเป็นสถานะอื่น เช่น ความก้าวหน้าเชิงเส้น ความเร่ง หรือการลดความเร็ว คุณอาจสังเกตเห็นว่าภาพเลื่อนหรือแปลงเป็นภาพอื่นเมื่อวางเมาส์เหนือหรือได้ยินเสียงเมื่อคลิกเมาส์ สิ่งเหล่านี้ล้วนเป็นเอฟเฟกต์การเปลี่ยนแปลงที่สามารถทำให้เว็บไซต์มีการโต้ตอบได้

ฟังก์ชันการค่อยๆ เปลี่ยนมีความสำคัญต่อการสร้างทรานซิชัน พวกเขาระบุว่าคุณสมบัติจะเปลี่ยนแปลงอย่างไร พวกเขายังสามารถเปลี่ยนแปลงอัตราที่มูลค่าของคุณสมบัติเปลี่ยนจากจุดเริ่มต้นไปยังจุดสิ้นสุดของการเปลี่ยนแปลง คุณสามารถใช้การเปลี่ยนด้วยวิธีต่อไปนี้:

element 
{
style_property: value;
transition_property: value;
}

องค์ประกอบที่นี่ระบุองค์ประกอบ HTML ที่คุณต้องการแปลงเช่น div, H1, img เป็นต้น style_property คือการจัดรูปแบบ CSS ที่ใช้กับองค์ประกอบนั้น ให้เราดู คุณสมบัติการเปลี่ยนแปลง บางอย่าง:

  • Transition-property : เอฟเฟกต์การเปลี่ยนจะถูกนำไปใช้กับคุณสมบัติ CSS ขององค์ประกอบ เช่น ความกว้าง ความสูง สี หรือรูปร่าง ค่าของแอตทริบิวต์นี้ระบุคุณสมบัติ CSS ขององค์ประกอบ เอฟเฟกต์การเปลี่ยนแปลงจะเริ่มเมื่อใดก็ตามที่คุณสมบัตินี้เปลี่ยนแปลง เช่น เมื่อวางเมาส์เหนือหรือเมื่อคลิก
  • Transition-timing-function : นี่คือฟังก์ชั่น Ease ที่จะนำไปใช้กับองค์ประกอบ คุณสมบัตินี้ใช้เพื่อระบุเส้นโค้งความเร็วของการเปลี่ยนแปลง เช่น ความสะดวกใน การผ่อนออก เชิงเส้น ฯลฯ
  • Transition-duration : มันเหมือนกับคุณสมบัติ animation-duration ใช้เพื่อระบุระยะเวลาของเอฟเฟกต์การเปลี่ยนแปลงในหน่วยวินาทีหรือมิลลิวินาที ตัวอย่างเช่น หากเราตั้งค่าเป็น 5 วินาที การเปลี่ยนแปลงจะมีผลภายใน 5 วินาที หากเราไม่ตั้งค่าคุณสมบัตินี้ ก็จะไม่มีการเปลี่ยนแปลงใดๆ เนื่องจากค่าเริ่มต้นของมันคือ 0
  • Transition-delay : ด้วยคุณสมบัตินี้ เราสามารถระบุระยะเวลาที่จะหน่วงเวลาเอฟเฟกต์การเปลี่ยนแปลงได้ ตัวอย่างเช่น หากคุณต้องการเริ่มเอฟเฟกต์หลังจากวางเมาส์ไว้ 5 วินาที ให้ตั้งค่าการหน่วงเวลาการเปลี่ยนภาพเป็น 5 วินาที
  • การเปลี่ยนแปลง : เป็นคุณสมบัติชวเลขสำหรับการตั้งค่าคุณสมบัติการเปลี่ยนแปลงข้างต้นทั้งหมดเข้าด้วยกัน

ตัวอย่างเช่น รหัสต่อไปนี้จะเปลี่ยนความกว้างขององค์ประกอบ div เมื่อวางเมาส์ไว้ ดูคุณสมบัติชวเลขการเปลี่ยนแปลงที่ใช้ที่นี่

div { 
  width: 50px;
  height: 50px;
  background: blue;
  transition: height 4s;     /*transition shorthand on height for 4 seconds*/
}
div:hover {
  height: 200px;      /* increase height on mouse hover */
}

แอนิเมชั่น vs. ทรานสิชั่น

Animations vs. Transitions

ความคล้ายคลึงกันระหว่างภาพเคลื่อนไหวและการเปลี่ยนภาพ
  • ทั้งทรานสิชั่นและแอนิเมชั่นใช้เพื่อแสดงภาพการเปลี่ยนแปลงในคุณสมบัติขององค์ประกอบ
  • เราสามารถระบุระยะเวลาในการเปลี่ยนและภาพเคลื่อนไหวได้
  • เรามีฟังก์ชันการจับเวลาบางอย่างเพื่อเปลี่ยนอัตราการเปลี่ยนจากค่าหนึ่งไปยังอีกค่าหนึ่งสำหรับทรานสิชั่นและแอนิเมชั่น
ความแตกต่างระหว่างภาพเคลื่อนไหวและการเปลี่ยนภาพ
  • การเปลี่ยน CSS เป็น ปฏิกิริยา พวกเขาจะต้องถูกเรียกโดยผู้ใช้ ในทางกลับกัน แอนิเมชันจะทำงานทุกครั้งที่โหลดหน้าบนเบราว์เซอร์ พวกเขาไม่จำเป็นต้องถูกเรียก
  • การเปลี่ยนทำงานหนึ่งครั้งแล้วหยุด จากนั้น เราต้องเรียกมันซ้ำแล้วซ้ำเล่าในขณะที่แอนิเมชั่นสามารถ วนซ้ำ ได้ พวกเขาสามารถเริ่มด้วยการหยุดของตัวเองแล้วเริ่มอีกครั้ง
  • เบราว์เซอร์จะดูแลการเปลี่ยนเอง เราแค่ต้องระบุจุดเริ่มต้นและจุดสิ้นสุดของการเปลี่ยนแปลง เราสามารถกำหนดเอฟเฟกต์การเปลี่ยนภาพได้ แต่เราไม่สามารถเปลี่ยนอัตราการเปลี่ยนแปลงของการเปลี่ยนแปลงระหว่างนั้นได้ ตัวอย่างเช่น หากภาพเลื่อนเมื่อวางเมาส์ เราจะเห็นว่าภาพนั้นค่อยๆ จางลงหรือจางลงเมื่อเราวางเมาส์เหนือภาพนั้น
  • ในทางกลับกัน แอนิเมชันให้ความยืดหยุ่นในการเปลี่ยนคุณสมบัติระหว่างจุดเริ่มต้นและจุดสิ้นสุด สิ่งนี้เกิดขึ้นได้ด้วยความช่วยเหลือของคีย์เฟรม ตัวอย่างเช่น เราสามารถตั้งค่าสีของรูปภาพเป็นสีแดงใน 5 วินาทีแรก จากนั้นเป็นสีน้ำเงินสำหรับ 5 วินาทีถัดไป จากนั้นเป็นสีเขียวสำหรับ 5 วินาทีถัดไป และสีเหลืองสำหรับ 5 วินาทีสุดท้ายของภาพเคลื่อนไหว ดังนั้นเราจึงสามารถควบคุมแอนิเมชั่นได้
คำนำหน้าผู้ขาย

ทุกเบราว์เซอร์ไม่รองรับฟีเจอร์ CSS3 ทั้งหมด ดังนั้นเราจึงใช้คำนำหน้าตามคุณสมบัติ CSS เหล่านั้นสำหรับเบราว์เซอร์เฉพาะ เช่น -webkit- (Safari), -moz- (Firefox) หรือ -o- (Opera) ซึ่งช่วยให้ตัวทำเครื่องหมายของเบราว์เซอร์เพิ่มการรองรับคุณสมบัติ CSS3 นั้นได้ คำนำหน้าเหล่านี้เรียกว่า คำนำหน้าผู้ขาย หรือ คำนำหน้าเบราว์เซอร์ CSS ดังนั้น เราจึงต้องใส่คำนำหน้าผู้ขายพร้อมกับคุณสมบัติแอนิเมชั่นและการเปลี่ยนแปลงด้วย ตัวอย่างเช่น พิจารณารหัสด้านล่างและดูว่ามีการใช้คำนำหน้าผู้ขายสำหรับ Safari อย่างไร:

div {
width: 100px;
height: 100px;
background: red;

/* For Safari 3.1 to 6.0 */
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 1s;

/* Standard syntax */
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

เคล็ดลับ! คุณสามารถหลีกเลี่ยงความเร่งรีบนี้ได้โดยใช้ไลบรารีเช่น -prefix-free เป็นไลบรารี JavaScript ซึ่งจะเพิ่มคำนำหน้าของเบราว์เซอร์ปัจจุบันให้กับโค้ด CSS ใดๆ ตรวจสอบห้องสมุดดังกล่าวมากมายที่มีอยู่บนเว็บ

บทสรุป

นักพัฒนาเว็บไซต์สามารถใช้แอนิเมชั่นและการแปลงเพื่อดึงดูดผู้ใช้มายังเว็บไซต์ของคุณ คุณสามารถใช้มันเพื่อปรับปรุงฟอร์ม การแจ้งเตือน กราฟิกพื้นหลัง รูปภาพ แผนภูมิ ดูเดิล ปุ่มเรียกร้องให้ดำเนินการ และสิ่งที่ไม่ควรทำ เพียงใช้จินตนาการของคุณแล้วคุณจะพบวิธีที่จะทำให้ผู้ใช้ของคุณประหลาดใจ จำไว้ว่าแม้การเปลี่ยนแปลงเล็กน้อยในเว็บไซต์ของคุณก็สามารถทำให้เว็บไซต์ดูดีขึ้นและเพิ่มมูลค่าได้ คุณเคยใช้แอนิเมชั่นบนเว็บไซต์ของคุณหรือยัง? แบ่งปันความคิดของคุณเกี่ยวกับการใช้ภาพเคลื่อนไหวและการเปลี่ยนภาพ