The CSS Podcast - 022: Animation
บางครั้งคุณจะเห็นตัวช่วยเล็กๆ ในอินเทอร์เฟซที่เมื่อคลิกแล้วจะให้ข้อมูลที่เป็นประโยชน์เกี่ยวกับส่วนนั้นๆ โดยมักจะมีภาพเคลื่อนไหวที่เต้นเป็นจังหวะเพื่อบอกคุณอย่างละเอียดอ่อนว่าข้อมูลดังกล่าวพร้อมให้ใช้งานแล้ว โมดูลนี้จะแสดงวิธีสร้างตัวช่วยเหล่านั้นและภาพเคลื่อนไหวอื่นๆ โดยใช้ CSS
คุณสามารถใช้ CSS เพื่อตั้งค่าลำดับภาพเคลื่อนไหวด้วยคีย์เฟรมได้ ลำดับเหล่านี้อาจเป็นภาพเคลื่อนไหวพื้นฐานแบบสถานะเดียวหรือลำดับที่ซับซ้อนซึ่งอิงตามเวลา
คีย์เฟรมคืออะไร
ในเครื่องมือภาพเคลื่อนไหวส่วนใหญ่ คีย์เฟรมเป็นกลไกที่คุณใช้กำหนดสถานะภาพเคลื่อนไหวให้กับการประทับเวลาในไทม์ไลน์
ตัวอย่างเช่น ไทม์ไลน์ของจุด "ตัวช่วย" ที่สั่นเป็นจังหวะมีดังนี้ ภาพเคลื่อนไหวทำงานเป็นเวลา 1 วินาทีและมี 2 สถานะ
แต่ละสถานะของภาพเคลื่อนไหวเหล่านี้จะมีจุดเริ่มต้นและจุดสิ้นสุดที่เฉพาะเจาะจง คุณจับคู่ข้อมูลเหล่านี้ในไทม์ไลน์ด้วยคีย์เฟรม
@keyframes
@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
แห่ง
หากต้องการใช้ @keyframes
ในกฎ CSS คุณสามารถกําหนดพร็อพเพอร์ตี้ภาพเคลื่อนไหวต่างๆ ทีละรายการ หรือจะใช้พร็อพเพอร์ตี้ทางลัด animation
ก็ได้
animation-duration
.my-element {
animation-duration: 10s;
}
พร็อพเพอร์ตี้ animation-duration จะกำหนดระยะเวลาของไทม์ไลน์ @keyframes
เป็นค่าเวลา
โดยค่าเริ่มต้นจะเป็น 0 วินาที ซึ่งหมายความว่าภาพเคลื่อนไหวจะยังคงทำงานอยู่ แต่คุณจะไม่เห็นภาพเคลื่อนไหวนั้น คุณใช้ค่าเวลาที่เป็นค่าติดลบไม่ได้
animation-timing-function
หากต้องการสร้างการเคลื่อนไหวที่ดูเป็นธรรมชาติในภาพเคลื่อนไหว คุณสามารถใช้ฟังก์ชันการกำหนดเวลาที่คำนวณความเร็วของภาพเคลื่อนไหวในแต่ละจุด ค่าที่คำนวณมักจะโค้ง ทำให้ภาพเคลื่อนไหวทำงานด้วยความเร็วที่ผันผวนตลอด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
.my-element {
animation-iteration-count: 10;
}
พร็อพเพอร์ตี้ animation-iteration-count จะกําหนดจํานวนครั้งที่ไทม์ไลน์ @keyframes
ควรทํางานในระหว่างภาพเคลื่อนไหว โดยค่าเริ่มต้น ค่านี้คือ 1 ซึ่งหมายความว่าภาพเคลื่อนไหวจะหยุดเมื่อถึงจุดสิ้นสุดของไทม์ไลน์ ค่านี้ต้องไม่เป็นค่าลบ
หากต้องการให้ภาพเคลื่อนไหวเล่นวนซ้ำ ให้ตั้งค่าจำนวนรอบเป็น infinite
นี่คือวิธีการทำงานของภาพเคลื่อนไหวที่สว่างวาบตั้งแต่ต้นบทเรียนนี้
animation-direction
.my-element {
animation-direction: reverse;
}
คุณกำหนดทิศทางที่ไทม์ไลน์จะทำงานกับคีย์เฟรมได้ด้วย animation-direction ซึ่งใช้ค่าต่อไปนี้
normal
: ค่าเริ่มต้น ซึ่งก็คือ "ไปข้างหน้า"reverse
: เลื่อนไทม์ไลน์ย้อนกลับalternate
: สำหรับภาพเคลื่อนไหวแต่ละรอบ ไทม์ไลน์จะสลับไปมาระหว่างการกรอไปข้างหน้ากับการกรอกลับalternate-reverse
: เหมือนกับalternate
แต่ภาพเคลื่อนไหวจะเริ่มต้นด้วยไทม์ไลน์ที่วิ่งย้อนกลับ
animation-delay
.my-element {
animation-delay: 5s;
}
พร็อพเพอร์ตี้ animation-delay จะกำหนดระยะเวลาที่เบราว์เซอร์รอก่อนที่จะเริ่มภาพเคลื่อนไหว
เช่นเดียวกับพร็อพเพอร์ตี้ animation-duration
พร็อพเพอร์ตี้นี้ยอมรับค่าเวลา
ต่างจาก animation-duration
คุณสามารถกำหนด animation-delay
เป็นค่าเชิงลบได้ ซึ่งจะทำให้ภาพเคลื่อนไหวเริ่มต้นที่จุดที่เกี่ยวข้องในไทม์ไลน์ เช่น หากภาพเคลื่อนไหวมีความยาว 10 วินาทีและคุณตั้งค่า animation-delay
เป็น -5s
ภาพเคลื่อนไหวจะเริ่มเล่นจากครึ่งทางของไทม์ไลน์
animation-play-state
.my-element:hover {
animation-play-state: paused;
}
พร็อพเพอร์ตี้ animation-play-state ช่วยให้คุณเล่นและหยุดภาพเคลื่อนไหวชั่วคราวได้
ค่าเริ่มต้นคือ running
หากตั้งค่าเป็น paused
ระบบจะหยุดภาพเคลื่อนไหวชั่วคราว
animation-fill-mode
พร็อพเพอร์ตี้ animation-fill-mode จะกำหนดค่าในไทม์ไลน์ @keyframes
ที่จะคงอยู่ก่อนที่ภาพเคลื่อนไหวจะเริ่มขึ้นหรือหลังจากภาพเคลื่อนไหวสิ้นสุด ค่าเริ่มต้นคือ none
ซึ่งหมายความว่าเมื่อภาพเคลื่อนไหวเสร็จสมบูรณ์ ระบบจะทิ้งค่าในไทม์ไลน์
ตัวเลือกอื่นๆ ได้แก่
forwards
: คีย์เฟรมสุดท้ายจะยังคงอยู่ตามทิศทางของภาพเคลื่อนไหวbackwards
: คีย์เฟรมแรกจะยังคงอยู่ตามทิศทางของภาพเคลื่อนไหวboth
: ทั้งคีย์เฟรมแรกและคีย์เฟรมสุดท้ายจะยังคงอยู่
ชวเลข animation
แทนที่จะกำหนดพร็อพเพอร์ตี้แต่ละรายการแยกกัน คุณสามารถกำหนดพร็อพเพอร์ตี้เหล่านั้นในanimation
รูปแบบย่อ ซึ่งจะช่วยให้คุณกำหนดคุณสมบัติภาพเคลื่อนไหวตามลำดับต่อไปนี้ได้
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
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