Thuộc tính chức năng chuyển đổi thời gian CSS
Ví dụ
Hiệu ứng chuyển tiếp với tốc độ như nhau từ đầu đến cuối:
div {
transition-timing-function: linear;
}
Hãy tự mình thử »Định nghĩa và cách sử dụng
Thuộc tính transition-timing-function
chỉ định đường cong tốc độ của hiệu ứng chuyển tiếp.
Thuộc tính này cho phép hiệu ứng chuyển tiếp thay đổi tốc độ trong suốt thời gian của nó.
Giá trị mặc định: | xoa dịu |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | KHÔNG. Đọc về hoạt hình |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.transitionTimingFunction="tuyến tính" Hãy dùng thử |
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 là -webkit-, -moz- hoặc -o- chỉ định phiên bản đầu tiên hoạt động với tiền tố.
Property | |||||
---|---|---|---|---|---|
transition-timing-function | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
Cú pháp CSS
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier( n , n , n , n )|initial|inherit;
Giá trị tài sản
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)) |
step-start | Equivalent to steps(1, start) |
step-end | Equivalent to steps(1, end) |
steps(int,start|end) | Specifies a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value "start" or "end", and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value "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 |
Mẹo: Hãy thử các giá trị khác nhau trong các ví dụ bên dưới để hiểu cách thức hoạt động của nó!
Thêm ví dụ
Ví dụ
Để hiểu rõ hơn về các giá trị khác nhau của hàm: Dưới đây là năm phần tử div khác nhau với năm giá trị khác nhau:
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
Hãy tự mình thử »Ví dụ
Tương tự như ví dụ trên, nhưng đường cong tốc độ được chỉ định bằng hàm khối bezier:
#div1 {transition-timing-function: cubic-bezier(0,0,1,1);}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Chuyển tiếp CSS
Tham chiếu DOM HTML: thuộc tính transitionTimingFunction