การเปลี่ยนสไตล์คุณสมบัติ TimingFunction
ตัวอย่าง
เปลี่ยนเส้นโค้งความเร็วของเอฟเฟกต์การเปลี่ยนแปลง:
document.getElementById("myDIV").style.transitionTimingFunction = "linear";
ความหมายและการใช้งาน
คุณสมบัติ TransitionTimingFunction ระบุเส้นโค้งความเร็วของเอฟเฟกต์การเปลี่ยนแปลง
คุณสมบัตินี้อนุญาตให้เอฟเฟกต์การเปลี่ยนแปลงเพื่อเปลี่ยนความเร็วตลอดระยะเวลา
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Property | |||||
---|---|---|---|---|---|
transitionTimingFunction | 26.0 | 10.0 | 16.0 | 6.1 3.1 WebkitTransitionTimingFunction |
12.1 |
ไวยากรณ์
ส่งกลับคุณสมบัติ transitionTimingFunction:
object.style.transitionTimingFunction
ตั้งค่าคุณสมบัติ transitionTimingFunction:
object.style.transitionTimingFunction = "ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|
initial|inherit"
มูลค่าทรัพย์สิน
Value | Description |
---|---|
ease | Default value. Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25, 0.1, 0.25, 1)) |
linear | Specifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0, 0, 1, 1)) |
ease-in | Specifies a transition effect with a slow start (equivalent to cubic-bezier(0.42, 0, 1, 1)) |
ease-out | Specifies a transition effect with a slow end (equivalent to cubic-bezier(0, 0, 0.58, 1)) |
ease-in-out | Specifies a transition effect with a slow start and end (equivalent to cubic-bezier(0.42, 0, 0.58, 1)) |
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 |
รายละเอียดทางเทคนิค
ค่าเริ่มต้น: | ผ่อนปรน |
---|---|
คืนมูลค่า: | สตริง แทนคุณสมบัติทรานสิชั่น-ไทม์มิ่ง-ฟังก์ชันของอิลิเมนต์ |
เวอร์ชัน CSS | CSS3 |
หน้าที่เกี่ยวข้อง
การอ้างอิง CSS: คุณสมบัติ Transition-timing-function
❮ สไตล์วัตถุ