ภาพเคลื่อนไหวเป็นวิธีที่ดีในการเน้นองค์ประกอบแบบอินเทอร์แอกทีฟ รวมถึงเพิ่มความสนใจและความสนุกสนานให้กับงานออกแบบของคุณ ในโมดูลนี้ คุณจะได้รู้วิธีเพิ่มและควบคุมเอฟเฟกต์ภาพเคลื่อนไหวด้วย CSS
บางครั้งคุณจะเห็นผู้ช่วยเล็กๆ น้อยๆ บนอินเทอร์เฟซที่ให้ข้อมูลที่เป็นประโยชน์ เกี่ยวกับส่วนที��เกี่ยวข้องเมื่อคลิก ภาพเหล่านี้มักมีภาพเคลื่อนไหวที่กะพริบอยู่เพื่อบอกให้รู้ว่ามีข้อมูลอยู่และควรโต้ตอบด้วย โมดูลนี้จะแสดงวิธีสร้างผู้ช่วยดัง��ล่าว รวมถึงภาพเคลื่อนไหวอื่นๆ โดยใช้ CSS
คุณใช้ CSS เพื่อกำหนดลำดับภาพเคลื่อนไหวด้วยคีย์เฟรมได้ ลําดับเหล่านี้อาจเป็นภาพเคลื่อนไหวแบบพื้นฐาน สถานะเดียว หรือลําดับตามเวลาที่ซับซ้อน
คีย์เฟรมคืออะไร
ในเครื่องมือภาพเคลื่อนไหวส่วนใหญ่ คีย์เฟรมคือกลไกที่คุณใช้กำหนดสถานะของภาพเคลื่อนไหวให้กับการประทับเวลาบนไทม์ไลน์
ตัวอย่างเช่น ต่อไปนี้เป็นไทม์ไลน์สำหรับจุด "helper" ที่กะพริบ ภาพเคลื่อนไหวนี้ทำงาน เป็นเวลา 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 คีย์เฟรม ซึ่งหมายความว่าคุณมี 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
การทำความเข้าใจเส้นโค้งเบซิเยร์เป็นเรื่องที่ซับซ้อน เครื่องมือแบบภาพอย่างโปรแกรมสร้างของ Lea Verou นี้จะมีประโยชน์อย่างมาก
ฟังก์ชันการค่อยๆ เปลี่ยน steps
บางครั้งคุณอาจต้องการควบคุมภาพเคลื่อนไหวแบบละเอียดยิ่งขึ้นด้วยการย้ายเป็นช่วงๆ แทนการไปตามเส้นโค้ง ฟังก์ชันการค่อยๆ เปลี่ยน steps()
ช่วยให้คุณแบ่งไทม์ไลน์เป็นช่วงระยะเวลาเท่ากันที่กำหนดไว้ได้
.my-element {
animation-timing-function: steps(10, end);
}
อาร์กิวเมนต์แรกคือจํานวนก้าว หากจำนวนคีย์เฟรมเท่ากับขั้นตอน แต่ละคีย์เฟรมจะเล่นตามลำดับตามระยะเวลาที่แน่นอนของขั้นตอน โดยไม่มีการเปลี่ยนระหว่างสถานะ หากมีคีย์เฟรมน้อยกว่าขั้นตอน เบราว์เซอร์จะเพิ่มขั้นตอนระหว่างคีย์เฟรมต่างๆ โดยขึ้นอยู่กับอาร์กิวเมนต์ที่ 2
อาร์กิวเมนต์ที่ 2 คือการกำหนด�������ท��ง ����������้งค่าเป็น 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;
}
คุณกำหนดทิศทางที่ไทม์ไลน์จะวิ่งเหนือคีย์เฟรมได้ด้วยทิศทางภาพเคลื่อนไหว ซึ่งจะใช้ค่าต่อไปนี้
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
คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่หรือไม่
SWOOP
และ swoop
อยู่ร่วมกันได้คีย์เวิร์ด from
และ to
เหมือนกันกับ
start
และend
0%
และ100%
from
เท่ากับ 0%
และ to
เท่ากับ 100%0
และ1
animation-timing-function
หรือที่รู้จักกันโดยทั่วไปในชื่อต่อไปนี้
จำนวนคีย์เฟรมขั้นต่ำที่ต้องมีในภาพเคลื่อนไหว @keyframes
คือเท่าใด