Thuộc tính chức năng chuyển tiếp CSS
Thí dụ
Hiệu ứng chuyển tiếp với cùng tốc độ từ đầu đến cuối:
div {
transition-timing-function: linear;
}
Định nghĩa và Cách sử dụng
Thuộc transition-timing-functiontính 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 độ theo 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ỗ 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 -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ụ dưới đây để hiểu cách hoạt động!
Các ví dụ khác
Thí dụ
Để hiểu rõ hơn về các giá trị hàm khác nhau: 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;}
Thí dụ
Tương tự như ví dụ trên, nhưng các đường cong tốc độ được chỉ định bằng hàm bậc ba:
#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);}
Các trang liên quan
Hướng dẫn CSS: Chuyển đổi CSS
Tham chiếu HTML DOM: thuộc tính transferTimingFunction