Thuộc tính transition-timing-function trong CSS

Định nghĩa và cách sử dụng

Thuộc tính transition-timing-function quy định đường cong tốc độ của hiệu ứng chuyển đổi.

Thuộc tính này cho phép hiệu ứng chuyển đổi thay đổi tốc độ theo thời gian.

Xem thêm:

Hướng dẫn CSS:CSS Transition

Hướng dẫn HTML DOM:Thuộc tính transitionTimingFunction

Thực例

Ví dụ 1

Hiệu ứng chuyển đổi từ đầu đến cuối với tốc độ tương đương:

div
{
transition-timing-function: linear;
}

Thử trực tiếp

Ngữ pháp CSS

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

Giá trị thuộc tính

Giá trị Mô tả
linear Định nghĩa hiệu ứng chuyển đổi bắt đầu và kết thúc với tốc độ tương đương (tương đương cubic-bezier(0,0,1,1)).
ease Định nghĩa hiệu ứng chuyển đổi bắt đầu chậm, sau đó nhanh hơn, sau đó kết thúc chậm (cubic-bezier(0.25,0.1,0.25,1)).
ease-in Định nghĩa hiệu ứng chuyển đổi bắt đầu chậm (tương đương cubic-bezier(0.42,0,1,1)).
ease-out Định nghĩa hiệu ứng chuyển đổi kết thúc chậm (tương đương cubic-bezier(0,0,0.58,1)).
ease-in-out Định nghĩa hiệu ứng chuyển đổi bắt đầu và kết thúc chậm (tương đương cubic-bezier(0.42,0,0.58,1)).
cubic-bezier(n,n,n,n) Định nghĩa giá trị của riêng bạn trong hàm cubic-bezier. Các giá trị có thể là số từ 0 đến 1.

Lưu ý:Hãy thử các giá trị khác nhau trong ví dụ để hiểu rõ hơn về cách chúng hoạt động.

Chi tiết kỹ thuật

Giá trị mặc định: ease
Kế thừa: không
Phiên bản: CSS3
Ngữ pháp JavaScript: đối tượng.style.transitionTimingFunction="linear"

Các ví dụ khác

Ví dụ 2

Để hiểu rõ hơn về các giá trị hàm khác nhau, hãy xem năm div元素 khác nhau với năm giá trị khác nhau dưới đây:

#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ử trực tiếp

Ví dụ 3

Cùng với ví dụ trên, nhưng quy định đường cong tốc độ bằng cubic-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);}

Thử trực tiếp

Hỗ trợ trình duyệt

Số liệu trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Số liệu với tiền tố -webkit-, -moz- hoặc -o- biểu thị phiên bản đầu tiên của tiền tố được sử dụng.

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-