Tạo animation sử dụng CSS3

Tạo animation sử dụng CSS3

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;
} 

Demo:

Hãy rê chuột qua

Trong đó:

  • keyframe_name: tên keyframe được định nghĩa bởi @keyframe
  • duration: Số giây để thực hiện hoạt họa. Ví dụ: 5s hoặc 0.5s
  • timing-function: hàm toán học được định nghĩa sẵn để thực hiện hoạt họa

    • linear: tuyến tính, thực hiện đều
    • ease: (mặc định) đầu tiên chậm, sau đó nhanh, trước khi kết thúc một cách chậm
    • ease-in: chậm lúc bắt đầu
    • ease-out: chậm lúc kết thúc
    • ease-in-out: chậm cả đầu và kết
    • cubic-bezier(n,n,n,n): tự định nghĩa giá trị cho hàm thực hiện cubic-bezier, các giá trị n nằm trong từ 0 đến 1
  • delay: thời gian chờ trước khi thực hiện hoạt họa. Ví dụ: 5s hoặc 0.5s
  • iteration-count: Số lần thực hiện, truyền vào số nguyên hoặc infinite là vô hạn lần
  • direction: hướng thực hiện, nhận một trong hai giá trị normal (mặc định) hoặc alternate. Với alternate, sau khi thực hiện xong nó sẽ thực hiện biến đổi ngược lại
  • play-state: nhận hai giá trị running (mặc đinh) hoặc paused. Với pause, hoạt họa sẽ tạm ngừng

 
Với keyframe, ngoài việc chỉ định nghĩa được from và to, ta có thể định nghĩa nhiều giai đoạn con quá trình thực hiện hoạt họa như sau:

@keyframes change_color_multi
{
	0%   {background: red;}
	25%  {background: yellow;}
	50%  {background: blue;}
	100% {background: green;}
}

@-webkit-keyframes change_color_multi /* Safari & Chrome */
{
	0%   {background: red;}
	25%  {background: yellow;}
	50%  {background: blue;}
	100% {background: green;}
} 

Demo:

Hãy rê chuột qua

Bạn có thể xem một vài demo khác như:
Pure CSS3 animated fish tank

Trình duyệt hỗ trợ

keyframe và animation được hỗ trợ từ IE10, FF16, Opera12.5
-webkit-keyframe và -webkit-animation được hỗ trợ bởi Chrome và Safari

Khi trích dẫn bài viết từ tek.eten.vn, xin vui lòng ghi rõ nguồn. Chúng tôi sẽ rất cảm ơn bạn!