ภาพเคลื่อนไหวเป็นวิธีที่ยอดเยี่ยมในการไฮไลต์องค์ประกอบแบบอินเทอร์แอกทีฟและเพิ่มความน่าสนใจ และสนุกกับการออกแบบของคุณ ในโมดูลนี้ ดูวิธีเพิ่มและควบคุม เอฟเฟ็กต์ภาพเคลื่อนไหวด้วย CSS
บางครั้งคุณเห็นตัวช่วยเล็กๆ บนอินเทอร์เฟซที่ให้ เกี่ยวกับส่วนที่ผู้ใช้อยู่เมื่อคุณคลิก โซลูชันเหล่านี้มักมี ภาพเคลื่อนไหวกะพริบเพื่อบอกให้คุณรู้ว่ามีข้อมูลอยู่และ ที่ควรจะโต้ตอบด้วย โมดูลนี้จะแสดงวิธีสร้างผู้ช่วยเหล่านั้น และภาพเคลื่อนไหวอื่นๆ โดยใช้ CSS
คุณใช้ CSS เพื่อตั้งค่าลำดับภาพเคลื่อนไหวด้วยคีย์เฟรมได้ ลำดับเหล่านี้ อาจเป็นภาพเคลื่อนไหวแบบพื้นฐาน สถานะเดียว หรือลำดับที่ซับซ้อนและอิงตามเวลา
คีย์เฟรมคืออะไร
ในเครื่องมือภาพเคลื่อนไหวส่วนใหญ่ คีย์เฟรมคือกลไกที่คุณใช้กำหนดภาพเคลื่อนไหว เพื่อระบุการประทับเวลาในไทม์ไลน์
เช่น นี่คือไทม์ไลน์สำหรับ "ผู้ช่วย" ที่กะพริบอยู่ จุด ภาพเคลื่อนไหวจะแสดง เป็นเวลา 1 วินาที และมี 2 สถานะ
ซึ่งจะมีจุดที่เจาะจงที่สถานะภาพเคลื่อนไหวแต่ละแบบเริ่มต้นและสิ้นสุด โดยคุณจะแมปสิ่งเหล่านี้บนไทม์ไลน์ด้วยคีย์เฟรม
@keyframes
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;
}
}
พร็อพเพอร์ตี้ 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;
}
ค่าฟังก์ชันการค่อยๆ เปลี่ยนจะปรากฏเป็นเส้นโค้ง เนื่องจากการค่อยๆ เปลี่ยนคำนวณโดยใช้
เส้นโค้งเบซิเยร์ ซึ่งเป็นฟังก์ชันประเภทหนึ่งที่ใช้จำลองความเร็ว แต่ละช่วงเวลา
คีย์เวิร์ดฟังก์ชัน เช่น ease
จะอ้างอิงเส้นโค้งเบซิเยร์ที่กำหนดไว้ล่วงหน้า ใน CSS
คุณสามารถกำหนดเส้นโค้งเบซิเยร์ได้โดยตรงโดยใช้ฟังก์ชัน cubic-bezier()
ซึ่งยอมรับค่าตัวเลข 4 ค่า ได้แก่ x1
, y1
, x2
, y2
.my-element {
animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}
ค่าเหล่านี้จะพล็อตแต่ละส่วนของเส้นโค้งตามแกน X และ Y
การทำความเข้าใจเส้นโค้งเบซิเยร์นั้นซับซ้อน เครื่องมือแบบภาพ เช่น generator โดย Lea Verou มีประโยชน์มาก
ฟังก์ชันการค่อยๆ เปลี่ยน steps
บางครั้งคุณอาจต้องการควบคุมภาพเคลื่อนไหวอย่างละเอียด
เคลื่อนที่เป็นช่วงๆ แทนที่จะไปตามเส้นโค้ง ฟังก์ชันการค่อยๆ เปลี่ยน steps()
ช่วยให้
คุณจะแบ่งไทม์ไลน์ออกเป็นช่วงๆ ที่กำหนดเป็นระยะเวลาที่เท่ากัน
.my-element {
animation-timing-function: steps(10, end);
}
อาร์กิวเมนต์แรกคือขั้นตอนตัวเลข หากมีจำนวนเท่ากัน คีย์เฟรมเป็นขั้นตอน แต่ละคีย์เฟรมจะเล่นตามลำดับเป็นระยะเวลาที่แน่นอน โดยไม่เปลี่ยนรัฐ หากมีคีย์เฟรมน้อยกว่าจำนวนก้าว เบราว์เซอร์จะเพิ่มขั้นตอนระหว่าง คีย์เฟรมที่ขึ้นอยู่กับอาร์กิวเมนต์ที่สอง
อาร์กิวเมนต์ที่สองคือทิศทาง หากตั้งค่าเป็น end
ซึ่งก็คือ
ซึ่งโดยค่าเริ่มต้น ระบบจะดำเนินการขั้นตอนต่างๆ ให้เสร็จสิ้นที่ส่วนท้ายของไทม์ไลน์ หากตั้งค่าเป็น start
ขั้นตอนแรกของภาพเคลื่อนไหว
จะเสร็จสมบูรณ์ทันทีที่เริ่มทำงาน ซึ่งหมายความว่า
สิ้นสุด 1 ขั้นตอนก่อน end
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-duration
คุณสามารถนิยาม animation-delay
เป็นค่าลบได้ ซึ่งต่างจาก animation-duration
ซึ่งจะทำให้ภาพเคลื่อนไหวเริ่มต้นจากจุดที่เกี่ยวข้องใน
ในไทม์ไลน์ ตัวอย่างเช่น หากภาพเคลื่อนไหวของคุณมีความยาว 10 วินาทีและคุณได้ตั้งค่า
animation-delay
ถึง -5s
ภาพเคลื่อนไหวจะเริ่มต้นจากครึ่งทางของ
ในไทม์ไลน์
animation-play-state
.my-element:hover {
animation-play-state: paused;
}
สถานะการเล่นภาพเคลื่อนไหว
ให้คุณเล่นและหยุดภาพเคลื่อนไหวชั่วคราวได้
ค่าเริ่มต้นคือ 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
เหมือนกันกับ
start
และend
0%
และ100%
0
และ 1
animation-timing-function
หรือเรียกอีกอย่างว่า:
จำนวนคีย์เฟรมขั้นต่ำที่ต้องใช้ในภาพเคลื่อนไหว @keyframes
คือเท่าใด