Animation là thuộc tính CSS giúp các đối tượng HTML chuyển động và tạo ra các hiệu ứng sinh động. Animation hoạt động bằng việc sử dụng các keyframes để thực hiện chuyển động những thuộc tính trong keyframes đó. Hãy cùng tìm hiểu rõ hơn về animation và cách sử dụng animation trong CSS qua bài viết này nhé

Tổng quan về thuộc tính animation trong CSS

Cấu trúc chung: animation: giá trị;

Cấu trúc hiển thị cho từng trình duyệt khác nhau:

Trên firefox: -moz-animation: giá trị;
Trên Google Chrome và Safari: -webkit-animation: giá trị;
Trên: Opera: -o-animation: giá trị;

Animation có 8 thuộc tính như sau:

Thuộc Tính	Chú Thích
`animation-name`	Tên cho một animation
`animation-duration`	Thời gian để hoàn thành một chuyển động, mặc định là 0s.
`animation-timing-function`	Thời gian chuyển động
`animation-iteration-count`	Số lần thực hiện chuyển động
`animation-delay`	Thời gian delay của chuyển động
`animation-direction`	Hướng chuyển động
`animation-fill-mode`	Chế độ điền (di chuyển đến và dừng tại điểm yêu cầu của giá trị)
`animation-play-state`	Xác định dừng – chạy

Ví dụ:

#myDIV {animation: out 2s infinite;}

@-webkit-keyframes out {
   from {left: 0px;}
   to {left: 200px;}
}

Đoạn trên sẽ tạo một animation chuyển động cho đối tượng có ID là myDIV. Tên của chuyển động là out, thực hiện chuyển động trong 2 giây. Nó sẽ thực hiện chuyển động dựa trên keyframes out từ trái sang phải với khoảng cách là 200px.

Thuộc tính animation-timing-function

animation-timing-function là thuộc tính mô tả cách thức thực hiện theo thời gian. Một số giá trị của animation-timing-function phổ biến như sau:

linear: Chuyển động đều tốc độ trong suốt chu kỳ.
ease: Chuyển động lúc đầu chậm, sau đó nhanh dần, và sau đó từ từ kết thúc.
ease-in: Chuyển động ban đầu sẽ chậm, và sau đó nhanh dần lên..
ease-out: Chuyển động ngược lại bên trên.
ease-in-out: Tương tự chuyển động của ease
cubic-bezier(n,n,n,n): Giá trị riêng cho chuyển động, (n = 0 hoặc 1), với 1 nhanh, 0 chậm.

Thuộc tính animation-iteration-count

Là thuộc tính thể hiện số lần chuyển động được thực hiện, Có 2 giá trị cho thuộc tính này đó là số nguyên và infinite (không giới hạn).

ví dụ animation-iteration-count: 4; hoặc animation-iteration-count: infinite;

Thuộc tính animation-direction

Thuộc tính này chỉ định hướng đi cho đối tượng, với các giá trị như sau:

normal: Hoạt động bình thường theo mặc định.
reverse: Hoạt động với chiều ngược lại mặc định.
alternate: Đảo chiều sau một chu kỳ hoạt động.
alternate-reverse: tương tự alternate nhưng trái 1 nhịp.

Thuộc tính animation-fill-mode

Thuộc tính này sẽ xác định vị trí cuối cùng của hoạt động. ví dụ như di chuyển đến và đứng tại đó, di chuyển đến cuối chu kỳ và quay trở lại vị trí cũ và đứng tại đó. Các giá trị của thuộc tính này như sau

forwards: Di chuyển đến và ở tại vị trí cuối cùng trong chu kỳ chuyển động.
backwards: Trở lại vị trí đầu tiên sau khi kết thúc chu kỳ.
both: Mình không rõ thuộc tính này, dùng thì không khác gì forwards cả nhưng theo W3C thì nó sẽ kết hợp cả 2.

Thuộc tính animation-play-state

Thuộc tính này sẽ điều khiển việc bắt đầu hoạt dừng lại hoạt động. Thuộc tính có 2 giá trị là paused và running

ví dụ: animation-play-state: running;

CSS Cơ bản

[CSS 15]Thuộc tính animation trong CSS