ตัวแปร animation-timing-function CSS

การระบุและการใช้งาน

animation-timing-function กำหนดแนวทางความเร็วของแอนิเมชัน

แนวทางความเร็วนิยายเวลาที่ใช้ในการเปลี่ยน CSS ไปยัง CSS อื่น

แนวทางความเร็วใช้ในการทำให้การเปลี่ยนแปลงเรียบร้อย

ดูเพิ่มเติมที่

ตัวเรียน CSS3CSS อนิมาชั่น

คู่มือ HTML DOMตัวแปร animationTimingFunction

ตัวอย่าง

ตัวอย่าง 1

เล่นแอนิเมชันด้วยความเร็วเดียวกันตั้งแต่เริ่มจนถึงจบ

div
{
animation-timing-function:2s;
}

ทดลองด้วยตัวเอง

ตัวอย่าง 2

เพื่อให้เข้าใจค่าฟังก์ชันเวลาที่แตกต่างกันได้ดีขึ้น นี่ได้มี div ห้าตัวที่มีค่าต่างกันห้าตัว

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

ทดลองด้วยตัวเอง

ตัวอย่าง 3

เหมือนตัวอย่างที่ผ่านมา แต่มีการกำหนดเส้นทางความเร็วด้วยฟังก์ชัน cubic-bezier:

#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

ทดลองด้วยตัวเอง

CSS ภาษา

animation-timing-function: value;

animation-timing-function ใช้ฟังก์ชันคณิตศาสตร์ที่ชื่อ cubic-bezier ในการสร้างเส้นทางความเร็ว คุณสามารถใช้ค่าของตัวเอง หรือค่าที่เป็นที่รู้จัก:

ค่า รายละเอียด การทดสอบ
linear ความเร็วของการ์ตูนเหมือนกันตลอดทั้งหมด การทดสอบ
ease ค่าเริ่มต้นโดยมีการ์ตูนเริ่มด้วยความเร็วต่ำ หลังจากนั้นเร็วขึ้นแล้วช้าลงก่อนจบ การทดสอบ
ease-in การ์ตูนเริ่มด้วยความเร็วต่ำ การทดสอบ
ease-out การ์ตูนจบด้วยความเร็วต่ำ การทดสอบ
ease-in-out การ์ตูนเริ่มและจบด้วยความเร็วต่ำ การทดสอบ
cubic-bezier(n,n,n,n) ค่าของคุณในฟังก์ชัน cubic-bezier คือตัวเลขจาก 0 ถึง 1

คำเตือน:ลองใช้ค่าต่างๆ ในฟังก์ชัน "ทดลองด้วยตัวเอง" ด้านล่าง

รายละเอียดเทคโนโลยี

ค่าเริ่มต้น: ease
การสืบทอด: no
เวอร์ชัน: CSS3
JavaScript ภาษา object.style.animationTimingFunction="linear"

การสนับสนุนโปรแกรมนึง

เลขในตารางบ่งชี้เวอร์ชันบราวเซอร์ที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่

มี -webkit-、-moz- หรือ -o- ต่อหลังเลขคือความสามารถใช้โปรแกรมก่อนหน้า

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-