Thuộc tính kiểu hoạt ảnhTimingFunction
Ví dụ
Thay đổi thuộc tính animationTimingFunction của phần tử <div>:
document.getElementById("myDIV").style.animationTimingFunction = "linear";
Hãy tự mình thử »Sự miêu tả
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ừ bộ kiểu CSS này sang bộ 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 trơn tru.
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ả về: | Một Chuỗi, biểu thị thuộc tính chức năng định thời gian hoạt ảnh của một phần tử |
Phiên bản CSS | CSS3 |
Hỗ trợ trình duyệt
animationTimingFunction
là một tính năng CSS3 (1999).
Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | 11 |
Trang liên quan
Tham khảo CSS: thuộc tính animation-timing-function