คุณสมบัติ animationTimingFunction ของ Style

การกำหนดและการใช้งาน

animationTimingFunction กำหนดแนวเวอร์ชั่นของการเคลื่อนไหว

แนวเวอร์ชั่นกำหนดเวลาที่การเคลื่อนไหวของอนุญาตจากชุดรูปแบบ CSS หนึ่งไปยังชุดรูปแบบ CSS อีกชุด

แนวเวอร์ชั่นใช้สำหรับการเปลี่ยนแปลงที่สมบูรณ์

ตัวอย่าง

เปลี่ยนคุณสมบัติ animationTimingFunction ของ <div> อิง:

document.getElementById("myDIV").style.animationTimingFunction = "linear";

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

การใช้งาน

คืนค่าคุณสมบัติ animationTimingFunction:

object.style.animationTimingFunction

ตั้งค่าคุณสมบัติ animationTimingFunction:

object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"

ค่าขององค์ประกอบ

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

กำหนดค่าของคุณเองในฟังก์ชันเบซิเออร์สามเส้นทาง

ค่าที่เป็นไปได้คือตัวเลขที่อยู่ในระยะทาง 0 ถึง 1
initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น โปรดดู initial.
inherit สืบทอดคุณสมบัตินี้จากองค์ประกอบพ่อของมัน โปรดดู inherit.

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

ค่าเริ่มต้น ease
ค่าที่กลับมา ตัวแปลของตัวอักษรซึ่งแสดงถึงองค์ประกอบขององค์ประกอบ animation-timing-function คุณสมบัติ.
เวอร์ชั่น CSS: CSS3

การสนับสนุนของเบราเซอร์

animationTimingFunction เป็นคุณสมบัติ CSS3 (1999)

ทั้งหมดเบราเซอร์ทุกตัวสนับสนุนมันทั้งหมด:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน 11

เพจที่เกี่ยวข้อง

คู่มือ CSS:animation-timing-function คุณสมบัติ