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

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

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

ไอคอนการกดทับเป็นวิธีหนึ่งที่จะทำให้ผู้ใช้มั่นใจว่า ข้อมูลที่สำคัญ

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

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

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

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

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

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

วันที่ แผนภาพเดิมจากก่อนหน้านี้ แต่คราวนี้เพิ่มคีย์เฟรม
ภาพเคลื่อนไหวกะพริบที่มีคีย์เฟรม

@keyframes

การรองรับเบราว์เซอร์

  • Chrome: 43
  • ขอบ: 12.
  • Firefox: 16.
  • Safari: 9.

แหล่งที่มา

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

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

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

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

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

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

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

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}
ลองแก้ไขกฎ pulse เพื่อดูว่าภาพเคลื่อนไหว การเปลี่ยนแปลง

พร็อพเพอร์ตี้ animation

การรองรับเบราว์เซอร์

  • Chrome: 43
  • ขอบ: 12.
  • Firefox: 16.
  • Safari: 9.

แหล่งที่มา

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

animation-duration

การรองรับเบราว์เซอร์

  • Chrome: 43
  • ขอบ: 12.
  • Firefox: 16.
  • Safari: 9.

แหล่งที่มา

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

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

animation-timing-function

การรองรับเบราว์เซอร์

  • Chrome: 43
  • ขอบ: 12.
  • Firefox: 16.
  • Safari: 9.

แหล่งที่มา

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

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

.my-element {
    animation-timing-function: ease-in-out;
}
ลองเปลี่ยนฟังก์ชันการกำหนดเวลาของภาพเคลื่อนไหว การใช้งาน

ค่าฟังก์ชันการค่อยๆ เปลี่ยนจะปรากฏเป็นเส้นโค้ง เนื่องจากการค่อยๆ เปลี่ยนคำนวณโดยใช้ เส้นโค้งเบซิเยร์ ซึ่งเป็นฟังก์ชันประเภทหนึ่งที่ใช้จำลองความเร็ว แต่ละช่วงเวลา คีย์เวิร์ดฟังก์ชัน เช่น ease จะอ้างอิงเส้นโค้งเบซิเยร์ที่กำหนดไว้ล่วงหน้า ใน CSS คุณสามารถกำหนดเส้นโค้งเบซิเยร์ได้โดยตรงโดยใช้ฟังก์ชัน 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 มีประโยชน์มาก

ฟังก์ชันการค่อยๆ เปลี่ยน steps

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

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

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

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

เปรียบเทียบภาพเคลื่อนไหวแบบมีและไม่มีขั้นตอน

animation-iteration-count

การรองรับเบราว์เซอร์

  • Chrome: 43
  • ขอบ: 12.
  • Firefox: 16.
  • Safari: 9.

แหล่งที่มา

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

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

ลองเปลี่ยนจำนวนการทำซ้ำสำหรับภาพเคลื่อนไหวนี้

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

ภาพเคลื่อนไหวกะพริบวนไปเรื่อยๆ

animation-direction

การรองรับเบราว์เซอร์

  • Chrome: 43
  • ขอบ: 12.
  • Firefox: 16.
  • Safari: 9.

แหล่งที่มา

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

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

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

animation-delay

การรองรับเบราว์เซอร์

  • Chrome: 43
  • ขอบ: 12.
  • Firefox: 16.
  • Safari: 9.

แหล่งที่มา

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

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

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

ลองเปลี่ยนการหน่วงเวลาของภาพเคลื่อนไหว

animation-play-state

การรองรับเบราว์เซอร์

  • Chrome: 43
  • ขอบ: 12.
  • Firefox: 16.
  • Safari: 9.

แหล่งที่มา

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

สถานะการเล่นภาพเคลื่อนไหว ให้คุณเล่นและหยุดภาพเคลื่อนไหวชั่วคราวได้ ค่าเริ่มต้นคือ running หากตั้งค่าเป็น paused ภาพเคลื่อนไหวจะหยุดชั่วคราว

วางเคอร์เซอร์เหนือองค์ประกอบที่เคลื่อนไหวได้เพื่อ ให้หยุดภาพเคลื่อนไหวชั่วคราว

animation-fill-mode

การรองรับเบราว์เซอร์

  • Chrome: 43
  • ขอบ: 12.
  • Firefox: 16.
  • Safari: 9.

แหล่งที่มา

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
3
4
2