Thuộc tính animation-timing-function CSS

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

animation-timing-function Định nghĩa đường cong tốc độ của animation.

Đường cong tốc độ định nghĩa thời gian cần thiết để chuyển đổi từ một bộ CSS样式 sang bộ CSS khác.

Đường cong tốc độ được sử dụng để làm cho sự thay đổi trở nên mượt mà hơn.

Xem thêm:

Giáo trình CSS3:CSS Animation

Tài liệu tham khảo HTML DOM:Thuộc tính animationTimingFunction

Mô hình

Mô hình 1

Chơi animation từ đầu đến cuối với tốc độ như nhau:

div
{
animation-timing-function:2s;
}

Thử ngay

Mô hình 2

Để hiểu rõ hơn về các giá trị của hàm thời gian khác nhau, ở đây cung cấp năm div khác nhau với năm giá trị khác nhau:

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

Thử ngay

Mô hình 3

Người dùng cùng, nhưng xác định đường cong tốc độ qua hàm cubic-bezier:

#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

Thử ngay

Cú pháp CSS

animation-timing-function: value;

animation-timing-function sử dụng hàm toán học tên là Cubic Bezier để tạo ra đường cong tốc độ. Bạn có thể sử dụng giá trị của riêng bạn trong hàm này, hoặc các giá trị được định trước:

Giá trị Mô tả Kiểm tra
linear Tốc độ của chuyển động từ đầu đến cuối là như nhau. Kiểm tra
ease Mặc định. Chuyển động bắt đầu với tốc độ chậm, sau đó tăng tốc, và chậm lại trước khi kết thúc. Kiểm tra
ease-in Chuyển động bắt đầu với tốc độ chậm. Kiểm tra
ease-out Chuyển động kết thúc với tốc độ chậm. Kiểm tra
ease-in-out Chuyển động bắt đầu và kết thúc với tốc độ chậm. Kiểm tra
cubic-bezier(n,n,n,n) Giá trị của bạn trong hàm cubic-bezier. Giá trị có thể là số từ 0 đến 1.

Lưu ý:Hãy thử sử dụng các giá trị khác nhau trong chức năng "Thử ngay" ở dưới đây.

Chi tiết kỹ thuật

Giá trị mặc định: ease
Di truyền: no
Phiên bản: CSS3
Cú pháp JavaScript: object.style.animationTimingFunction="linear"

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn thuộc tính này.

Sử dụng số với tiền tố -webkit-、-moz- hoặc -o- để chỉ phiên bản đầu tiên của tiền tố.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-