Lệnh @keyframes

Lệnh @keyframes định nghĩa các khung hình chính cho hoạt ảnh. Một khung hình chính đại diện cho các thuộc tính khác nhau của phần tử CSS của chúng ta, ví dụ, vị trí, kích thước, màu sắc và các thuộc tính khác, được áp dụng cho phần tử tại thời điểm được chỉ định.

Cú pháp

@keyframes tên-hoạt-ảnh {
	các-khung-hình-chính
}

Ví dụ

Định nghĩa các khung hình chính:

<div id="elem"></div>

@keyframes anim {
	from {
		margin-left: 0px;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation: anim 3s infinite;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Ví dụ

Bây giờ hãy di chuyển hình vuông của chúng ta từ trên xuống dưới bằng hoạt ảnh:

<div id="elem"></div>

@keyframes anim {
	from {
		margin-top: 0%;
	}
	to {
		margin-top: 10%;
	}
}

#elem {
	animation: anim 2s infinite;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Ví dụ

Hãy tăng chiều rộng của hình của chúng ta bằng hoạt ảnh, thiết lập các điểm khóa bằng phần trăm:

<div id="elem"></div>

@keyframes anim {
	from {
		width: 10%;
	}
	to {
		width: 40%;
	}
}

#elem {
	animation: anim 2s infinite;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Ví dụ

Bây giờ hãy thay đổi độ trong suốt của hình của chúng ta:

<div id="elem"></div>

@keyframes anim {
	from {
		background-color: #467CBC;
	}
	to {
		background-color: #C2DDFD;
	}
}

#elem {
	animation: anim 2s infinite;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Xem thêm

tất cả các thuộc tính cho hoạt ảnh CSS animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, keyframes
transition – chuyển tiếp mượt (hoạt ảnh khi di chuột vào phần tử)