Xoay nào!

Để tạo hoạt ảnh chỉ bằng CSS, ta sẽ dùng keyframes với cú pháp sau

@keyframes animation_name {
	from {
		...
	}
	to {
		...
	}
}

Chú ý tên hoạt ảnh là animation_name (có thể thay đổi). Bên trong phần thân của from và to, bạn nên thêm các thay đổi của thuộc tính CSS, ví dụ:

@keyframes fade_out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

Đoạn code trên sẽ tạo hoạt ảnh chuyển từ độ mờ 1 sang độ mờ 0.

Để áp dụng hoạt ảnh trên cho một phần tử cụ thể, ví dụ, hãy dùng:

#spinner {
	animation: fade_out 1.3s infinite;
}

Đoạn code trên sẽ áp dụng hoạt ảnh fade_out cho phần tử #spinner, với thời lượng 1.3 giây và chạy vô hạn lần.