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ử