Trong bài viết này, tôi sẽ trình bày cách sử dụng CSS3 để tạo các hiệu ứng hoạt họa thông qua sử dụng từ khóa animation. Trong nhiều trường hợp, với animation, ta có thể tạo hiệu ứng tốt thay thế cho các phương pháp truyền thống như ảnh động, flash, javascript. Tôi sẽ sử dụng các ví dụ để mô tả cách sử dụng để có cái nhìn trực quan nhất.

Thực hiện

Để tạo ra hiệu ứng hoạt họa, ta cần định nghĩa các keyframe là các điểm đánh dấu, trình duyệt sẽ thực hiện việc biến đổi trạng thái từ keyframe trước sang keyframe sau tương tự như sử dụng transition.

Để định nghĩa keyframe, ta sử dụng cú pháp như sau:

@keyframe keyframe_name{
	from { ... }
	to { ... }
}

// Ví dụ
@keyframes change_color
{
	from {background: red;color:white;}
	to {background: yellow;color:blue;}
}

@-webkit-keyframes change_color /* Safari & Chrome */
{
	from {background: red;color:white;}
	to {background: yellow;color:blue;}
}

Để sử dụng keyframe trên để tạo hoạt họa trong 5 giây, ta sử dụng animation:

selector{
	animation: keyframe_name duration timing-function delay iteration-count direction play-state;
	-webkit-animation: keyframe_name duration timing-function delay iteration-count direction play-state; /* Safari & Chrome */
}

// Ví dụ
div
{
	animation: change_color 5s;
	-webkit-animation: change_color 5s;
}

Theo tek.eten.vn