[CSS Căn bản] Tìm hiểu về thuộc tính hoạt hình animation trong CSS3

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.

Mô tả chuyển động của một Animation CSS3

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;

Trong bài sau mình sẽ chia sẻ với bạn về cách xét độ ưu tiên của các CSS trùng nhau.