คุณสมบัติ animation-timing-function

คุณสมบัติ animation-timing-function กำหนดความเร็วของการเปลี่ยนแปลง (ความเร่ง) ของแอนิเมชัน ตัวอย่างเช่น ในตอนแรกช้า ต่อมา เร็ว จากนั้นช้าอีกครั้ง เป็นต้น

ไวยากรณ์

ค่า

ค่า	คำอธิบาย
ease	ในตอนแรกช้า ต่อมาเร็ว สุดท้ายช้าอีกครั้ง
ease-in	เริ่มต้นช้าและค่อย ๆ เร่งความเร็วขึ้น
ease-out	เริ่มต้นเร็วและค่อย ๆ ช้าลงจนหยุด
ease-in-out	ในตอนแรกช้า ต่อมาเร็ว สุดท้ายช้าอีกครั้ง แตกต่างจาก ease ในเรื่องความเร็ว
linear	มีความเร็วคงที่เสมอ
step-start	ไม่มีการเคลื่อนไหว ค่าคุณสมบัติเป็นค่าสุดท้ายทันที
step-end	ไม่มีการเคลื่อนไหว ค่าคุณสมบัติจะรอเวลา ที่กำหนดไว้ใน animation-duraton, จากนั้นจะเปลี่ยนเป็นค่าสุดท้ายทันที
steps	ค่าของคุณสมบัติเปลี่ยนแปลงเป็นขั้นๆ
cubic-bezier	เส้นโค้ง Bezier ที่สามารถกำหนดแอนิเมชันแบบใดก็ได้ ดู ตัวสร้างเส้นโค้ง Bezier

ค่าเริ่มต้น: ease

การเปรียบเทียบค่าต่างๆ

นำเมาส์ไปวางบนบล็อกด้านล่างนี้ เพื่อดูการทำงานของฟังก์ชันกำหนดเวลาทุกประเภท:

ดูเพิ่มเติม