Thuộc tính animation-timing-function
Thuộc tính animation-timing-function
thiết lập tốc độ thay đổi (gia tốc)
của hoạt ảnh. Ví dụ: đầu tiên chậm, sau đó
nhanh, rồi lại chậm, v.v.
Cú pháp
bộ-chọn {
animation-timing-function: giá-trị;
}
Giá trị
| Giá trị | Mô tả |
|---|---|
ease |
Đầu tiên chậm, sau đó nhanh, cuối cùng lại chậm. |
ease-in |
Bắt đầu chậm và dần dần tăng tốc. |
ease-out |
Bắt đầu nhanh và dần dần dừng lại. |
ease-in-out |
Đầu tiên chậm, sau đó nhanh, cuối cùng lại chậm. Khác với ease về tốc độ. |
linear |
Luôn luôn cùng một tốc độ. |
step-start |
Không có hoạt ảnh, thuộc tính ngay lập tức nhận giá trị cuối cùng. |
step-end |
Không có hoạt ảnh, thuộc tính chờ khoảng thời gian
được đặt trong animation-duraton,
rồi sau đó ngay lập tức nhận giá trị cuối cùng.
|
steps |
Giá trị của thuộc tính thay đổi theo từng bước nhảy. |
cubic-bezier |
Đường cong Bezier, có thể tạo hoạt ảnh tùy ý. Xem trình tạo đường cong Bezier. |
Giá trị mặc định: ease.
So sánh các giá trị khác nhau
Di chuột lên các khối dưới đây, để xem hoạt động của tất cả các loại hàm thời gian:
Xem thêm
-
thuộc tính
animation,
là thuộc tính viết tắt cho hoạt ảnh -
lệnh
@keyframes,
thiết lập các khung hình chính của hoạt ảnh -
chuyển tiếp mượt mà
transition, là hoạt ảnh khi di chuột vào phần tử