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

Cập nhật lần cuối: 01 Tháng Tư 2018

CSS cơ bản

2,181 Lượt xem

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

Cấu trúc và thuộc tính của animation.

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	Giải thích
`animation-name`	Xác định tên cho một animation.
`animation-duration`	Xác định 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-delay`	Thời gian delay của chuyển động
`animation-iteration-count`	Số lần thực hiện chuyển động
`animation-direction`	Hướng chuyển động
`animation-fill-mode`	Xác định 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.

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.