Phong cách hoạt hìnhTimingFunction thuộc tính
Thí dụ
Thay đổi thuộc tính animationTimingFunction của phần tử <div>:
document.getElementById("myDIV").style.animationTimingFunction = "linear";
Định nghĩa và Cách sử dụng
AnimationTimingFunction chỉ định đường cong tốc độ của hoạt ảnh.
Đường cong tốc độ xác định THỜI GIAN mà hoạt ảnh sử dụng để thay đổi từ một tập hợp các kiểu CSS này sang một tập hợp các kiểu CSS khác.
Đường cong tốc độ được sử dụng để thực hiện các thay đổi một cách suôn sẻ.
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Các số theo sau bởi Moz chỉ định phiên bản đầu tiên hoạt động với tiền tố.
Property | |||||
---|---|---|---|---|---|
animationTimingFunction | 43.0 | 79.0 | 16.0 5.0 Moz |
9.0 | 30.0 |
Cú pháp
Trả về thuộc tính animationTimingFunction:
object.style.animationTimingFunction
Đặt thuộc tính animationTimingFunction:
object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"
Giá trị tài sản
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 |
Chi tiết kỹ thuật
Giá trị mặc định: | xoa dịu |
---|---|
Giá trị trả lại: | Một chuỗi, đại diện cho thuộc tính chức năng thời gian hoạt ảnh của một phần tử |
Phiên bản CSS | CSS3 |
Các trang liên quan
Tham chiếu CSS: thuộc tính animation-timing-function