สไตล์แอนิเมชั่นTimingFunction Property
ตัวอย่าง
การเปลี่ยนคุณสมบัติ animationTimingFunction ของ <div> องค์ประกอบ:
document.getElementById("myDIV").style.animationTimingFunction = "linear";
ความหมายและการใช้งาน
animationTimingFunction ระบุเส้นโค้งความเร็วของแอนิเมชัน
เส้นโค้งความเร็วกำหนด TIME ที่แอนิเมชั่นใช้เพื่อเปลี่ยนจากชุดสไตล์ CSS ชุดหนึ่งเป็นอีกชุดหนึ่ง
เส้นโค้งความเร็วใช้เพื่อทำให้การเปลี่ยนแปลงเป็นไปอย่างราบรื่น
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Numbers ตามด้วย Moz ระบุเวอร์ชันแรกที่ใช้งานได้กับคำนำหน้า
Property | |||||
---|---|---|---|---|---|
animationTimingFunction | 43.0 | 79.0 | 16.0 5.0 Moz |
9.0 | 30.0 |
ไวยากรณ์
ส่งคืนคุณสมบัติ animationTimingFunction:
object.style.animationTimingFunction
ตั้งค่าคุณสมบัติ animationTimingFunction:
object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"
มูลค่าทรัพย์สิน
Value | Description |
---|---|
linear | The animation has the same speed from start to end |
ease | Default value. The animation has a slow start, then fast, before it ends slowly |
ease-in | The animation has a slow start |
ease-out | The animation has a slow end |
ease-in-out | The animation has both a slow start and a slow end |
cubic-bezier(n, n, n, n) | Define your own values in the cubic-bezier function Possible values are numeric values from 0 to 1 |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
รายละเอียดทางเทคนิค
ค่าเริ่มต้น: | ผ่อนปรน |
---|---|
คืนมูลค่า: | A String แทนคุณสมบัติ animation-timing-function ของ element |
เวอร์ชัน CSS | CSS3 |
หน้าที่เกี่ยวข้อง
การอ้างอิง CSS: คุณสมบัติแอนิเมชั่นเวลาฟังก์ชั่น