Thuộc tính animation
Thuộc tính animation là một thuộc tính
viết tắt để thiết lập hoạt ảnh, cho phép xác định
tất cả các thuộc tính cho hoạt ảnh cùng một lúc: animation-name,
animation-duration,
animation-delay,
animation-timing-function,
animation-iteration-count,
animation-direction,
animation-fill-mode,
animation-play-state.
Thứ tự của các giá trị không quan trọng, thời gian thực hiện
hoạt ảnh animation-duration bắt buộc
phải đứng trước độ trễ animation-delay.
Chỉ có các thuộc tính animation-name
và animation-duration là bắt buộc.
Thuộc tính cũng có thể nhận giá trị none,
giá trị này sẽ tắt hoạt ảnh hoàn toàn. Giá trị này
là giá trị mặc định.
Cú pháp
bộ chọn {
animation: các giá trị;
}
Ví dụ
Trong ví dụ này, sẽ có một độ trễ
3 giây trước khi hoạt ảnh bắt đầu
(trước mỗi lần phát mới),
và sau đó hoạt ảnh sẽ được phát trong
6 giây:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0px;
}
to {
margin-left: 400px;
}
}
#elem {
animation: move 6s infinite 3s linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Ví dụ . Các vấn đề có thể xảy ra
Hoạt ảnh được viết ở dạng rút gọn có thể không hoạt động do tên của nó. Hãy xem xét hoạt ảnh sau:
@keyframes reverse {
from {
left: 0;
}
to {
left: 300px;
}
}
Lưu ý, tôi đang sử dụng tên hoạt ảnh là reverse.
Thoạt nhìn, mọi thứ đều ổn, nhưng hoạt ảnh
không hoạt động, vì reverse là một
từ khóa hợp lệ cho thuộc tính animation-direction.
Hoạt ảnh cũng sẽ không hoạt động khi sử dụng các từ khóa khác trong tên ở dạng viết tắt. Nhưng mọi thứ hoạt động tốt khi sử dụng hình thức mô tả "đầy đủ".
Các từ khóa-giá trị của animation-direction
có thể làm hỏng hoạt ảnh, cũng như các từ khóa
liên quan đến hàm làm mịn,
và infinite, alternate,
running, paused, v.v.
Xem thêm
-
lệnh
@keyframes,
xác định các khung hình chính của hoạt ảnh -
chuyển tiếp mượt mà
transition, đại diện cho một hoạt ảnh khi di chuột qua phần tử