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

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

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

คีย์เฟรมคืออะไร

ในเครื่องมือภาพเคลื่อนไหวส่วนใหญ่ คีย์เฟรมเป็นกลไกที่คุณใช้กำหนดสถานะภาพเคลื่อนไหวให้กับการประทับเวลาในไทม์ไลน์

ตัวอย่างเช่น ไทม์ไลน์ของจุด "ตัวช่วย" ที่สั่นเป็นจังหวะมีดังนี้ ภาพเคลื่อนไหวทำงานเป็นเวลา 1 วินาทีและมี 2 สถานะ

สถานะของภาพเคลื่อนไหวของพัลส์ในช่วง 1 วินาที

แต่ละสถานะของภาพเคลื่อนไหวเหล่านี้จะมีจุดเริ่มต้นและจุดสิ้นสุดที่เฉพาะเจาะจง คุณจับคู่ข้อมูลเหล่านี้ในไทม์ไลน์ด้วยคีย์เฟรม

แผนภาพเดียวกับก่อนหน้านี้ แต่ครั้งนี้มีเฟรมหลัก

@keyframes

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

@keyframes ของ CSS สร้างขึ้นจากแนวคิดเดียวกับคีย์เฟรมภาพเคลื่อนไหว

ต่อไปนี้คือตัวอย่างที่มี 2 สถานะ

@keyframes my-animation {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0px);
  }
}

ส่วนสําคัญแรกคือตัวระบุที่กําหนดเอง (custom-ident) ซึ่งเป็นชื่อของกฎ keyframes ตัวระบุในตัวอย่างนี้คือ my-animation ตัวระบุที่กําหนดเองทํางานเหมือนชื่อฟังก์ชัน ซึ่งช่วยให้คุณอ้างอิงกฎคีย์เฟรมในที่อื่นๆ ในโค้ด CSS ได้

ไม่ได้

ในกฎคีย์เฟรม from และ to คือคีย์เวิร์ดที่แสดงถึง 0% และ 100% ซึ่งเป็นจุดเริ่มต้นและจุดสิ้นสุดของภาพเคลื่อนไหว คุณสร้างกฎเดียวกันอีกครั้งได้ดังนี้

@keyframes my-animation {
    0% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}

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

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}

ที่พัก animation แห่ง

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

หากต้องการใช้ @keyframes ในกฎ CSS คุณสามารถกําหนดพร็อพเพอร์ตี้ภาพเคลื่อนไหวต่างๆ ทีละรายการ หรือจะใช้พร็อพเพอร์ตี้ทางลัด animation ก็ได้

animation-duration

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.my-element {
    animation-duration: 10s;
}

พร็อพเพอร์ตี้ animation-duration จะกำหนดระยะเวลาของไทม์ไลน์ @keyframes เป็นค่าเวลา โดยค่าเริ่มต้นจะเป็น 0 วินาที ซึ่งหมายความว่าภาพเคลื่อนไหวจะยังคงทำงานอยู่ แต่คุณจะไม่เห็นภาพเคลื่อนไหวนั้น คุณใช้ค่าเวลาที่เป็นค่าติดลบไม่ได้

animation-timing-function

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

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

มีคีย์เวิร์ดหลายรายการที่ใช้เป็นค่าเริ่มต้นใน CSS ซึ่งจะใช้เป็นค่าสำหรับ animation-timing-function ดังนี้ linear, ease, ease-in, ease-out, ease-in-out

.my-element {
    animation-timing-function: ease-in-out;
}

ค่าของฟังก์ชันการโจมตีจะดูเหมือนเป็นเส้นโค้งเนื่องจากระบบคำนวณการโจมตีโดยใช้เส้นโค้ง Bézier ซึ่งเป็นฟังก์ชันประเภทหนึ่งที่ใช้ในการจำลองความเร็ว คีย์เวิร์ดฟังก์ชันการกำหนดเวลาแต่ละรายการ เช่น ease จะอ้างอิงเส้นโค้งเบซิเยร์ที่กําหนดไว้ล่วงหน้า ใน CSS คุณกำหนดเส้นโค้ง Bézier ได้โดยตรงโดยใช้ฟังก์ชัน cubic-bezier() ซึ่งรับค่าตัวเลข 4 ค่า ได้แก่ x1, y1, x2, y2

.my-element {
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}

ค่าเหล่านี้จะแสดงแต่ละส่วนของเส้นโค้งตามแกน X และแกน Y

เส้นเบย์ซีเยอร์ในแผนภูมิความคืบหน้าเทียบกับเวลา

การทำความเข้าใจเส้นโค้ง Bézier นั้นซับซ้อน เครื่องมือภาพ เช่น Generator ของ Lea Verou นี้มีประโยชน์มาก

ฟังก์ชัน easing ของ steps

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

.my-element {
    animation-timing-function: steps(10, end);
}

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

อาร์กิวเมนต์ที่ 2 คือทิศทาง หากตั้งค่าเป็น end ซึ่งเป็นค่าเริ่มต้น ขั้นตอนจะสิ้นสุดเมื่อไทม์ไลน์สิ้นสุด หากตั้งค่าเป็น start ขั้นตอนแรกของภาพเคลื่อนไหวจะเสร็จสมบูรณ์ทันทีที่เริ่มต้น ซึ่งหมายความว่าภาพเคลื่อนไหวจะจบเร็วกว่า end 1 ขั้นตอน

animation-iteration-count

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.my-element {
    animation-iteration-count: 10;
}

พร็อพเพอร์ตี้ animation-iteration-count จะกําหนดจํานวนครั้งที่ไทม์ไลน์ @keyframes ควรทํางานในระหว่างภาพเคลื่อนไหว โดยค่าเริ่มต้น ค่านี้คือ 1 ซึ่งหมายความว่าภาพเคลื่อนไหวจะหยุดเมื่อถึงจุดสิ้นสุดของไทม์ไลน์ ค่านี้ต้องไม่เป็นค่าลบ

หากต้องการให้ภาพเคลื่อนไหวเล่นวนซ้ำ ให้ตั้งค่าจำนวนรอบเป็น infinite นี่คือวิธีการทำงานของภาพเคลื่อนไหวที่สว่างวาบตั้งแต่ต้นบทเรียนนี้

animation-direction

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.my-element {
    animation-direction: reverse;
}

คุณกำหนดทิศทางที่ไทม์ไลน์จะทำงานกับคีย์เฟรมได้ด้วย animation-direction ซึ่งใช้ค่าต่อไปนี้

  • normal: ค่าเริ่มต้น ซึ่งก็คือ "ไปข้างหน้า"
  • reverse: เลื่อนไทม์ไลน์ย้อนกลับ
  • alternate: สำหรับภาพเคลื่อนไหวแต่ละรอบ ไทม์ไลน์จะสลับไปมาระหว่างการกรอไปข้างหน้ากับการกรอกลับ
  • alternate-reverse: เหมือนกับ alternate แต่ภาพเคลื่อนไหวจะเริ่มต้นด้วยไทม์ไลน์ที่วิ่งย้อนกลับ

animation-delay

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.my-element {
    animation-delay: 5s;
}

พร็อพเพอร์ตี้ animation-delay จะกำหนดระยะเวลาที่เบราว์เซอร์รอก่อนที่จะเริ่มภาพเคลื่อนไหว เช่นเดียวกับพร็อพเพอร์ตี้ animation-duration พร็อพเพอร์ตี้นี้ยอมรับค่าเวลา

ต่างจาก animation-duration คุณสามารถกำหนด animation-delay เป็นค่าเชิงลบได้ ซึ่งจะทำให้ภาพเคลื่อนไหวเริ่มต้นที่จุดที่เกี่ยวข้องในไทม์ไลน์ เช่น หากภาพเคลื่อนไหวมีความยาว 10 วินาทีและคุณตั้งค่า animation-delay เป็น -5s ภาพเคลื่อนไหวจะเริ่มเล่นจากครึ่งทางของไทม์ไลน์

animation-play-state

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.my-element:hover {
    animation-play-state: paused;
}

พร็อพเพอร์ตี้ animation-play-state ช่วยให้คุณเล่นและหยุดภาพเคลื่อนไหวชั่วคราวได้ ค่าเริ่มต้นคือ running หากตั้งค่าเป็น paused ระบบจะหยุดภาพเคลื่อนไหวชั่วคราว

animation-fill-mode

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

พร็อพเพอร์ตี้ animation-fill-mode จะกำหนดค่าในไทม์ไลน์ @keyframes ที่จะคงอยู่ก่อนที่ภาพเคลื่อนไหวจะเริ่มขึ้นหรือหลังจากภาพเคลื่อนไหวสิ้นสุด ค่าเริ่มต้นคือ none ซึ่งหมายความว่าเมื่อภาพเคลื่อนไหวเสร็จสมบูรณ์ ระบบจะทิ้งค่าในไทม์ไลน์ ตัวเลือกอื่นๆ ได้แก่

  • forwards: คีย์เฟรมสุดท้ายจะยังคงอยู่ตามทิศทางของภาพเคลื่อนไหว
  • backwards: คีย์เฟรมแรกจะยังคงอยู่ตามทิศทางของภาพเคลื่อนไหว
  • both: ทั้งคีย์เฟรมแรกและคีย์เฟรมสุดท้ายจะยังคงอยู่

ชวเลข animation

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

  1. animation-name
  2. animation-duration
  3. animation-timing-function
  4. animation-delay
  5. animation-iteration-count
  6. animation-direction
  7. animation-fill-mode
  8. animation-play-state
.my-element {
    animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}

ข้อควรพิจารณาเมื่อทำงานกับภาพเคลื่อนไหว

ผู้ใช้สามารถตั้งค่าระบบปฏิบัติการให้ลดการเคลื่อนไหวเมื่อโต้ตอบกับแอปพลิเคชันและเว็บไซต์ คุณสามารถตรวจหาค่ากําหนดนี้ได้โดยใช้คําค้นหาสื่อ prefers-reduced-motion ดังนี้

@media (prefers-reduced-motion) {
  .my-autoplaying-animation {
    animation-play-state: paused;
  }
}

ซึ่งไม่ได้หมายความว่าต้องไม่มีภาพเคลื่อนไหว ผู้ใช้ต้องการเห็นภาพเคลื่อนไหวน้อยลง โดยเฉพาะภาพเคลื่อนไหวที่ไม่คาดคิด ดูข้อมูลเพิ่มเติมเกี่ยวกับค่ากําหนดนี้และประสิทธิภาพโดยรวมได้ในคู่มือภาพเคลื่อนไหว

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับภาพเคลื่อนไหว

ชื่อหรือตัวระบุที่กำหนดเองของภาพเคลื่อนไหว @keyframes จะคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่หรือไม่

ไม่ใช่
ใช่

คีย์เวิร์ด from และ to เหมือนกับคีย์เวิร์ดต่อไปนี้

0 และ 1
start และend
0% และ100%

animation-timing-function เรียกกันโดยทั่วไปว่า

การปรับเปลี่ยน
การกำหนดเวลาแบบไดนามิก
ล่าช้า

ต้องมีคีย์เฟรมขั้นต่ำเท่าใดในภาพเคลื่อนไหว @keyframes

1
4
2
3