Làm chủ hiệu ứng Animation trong CSS3 áp dụng cho Website

Thêm Animation cho 1 thuộc tính class/id:

Tên class/id {animation: [name] [duration] [timing] [delay] [interaction-count] [direction]}
@keyframes [name]{from{...............}to{...............}}
@-webkit-keyframes [name]{from{...............}to{...............}}
@-moz-keyframes [name]{from{...............}to{...............}}
@-o-keyframes [name]{from{opacity:0}to{...............}}

.class/#id{

• Name = Tên hiệu ứng (Tùy chọn text bất kì)
• Duration = Là thời gian của 1 hiệu ứng tính bằng giây (s)
• Timing = Tốc độ chuyển động
• delay = Sau bao lâu thì bắt đầu chuyển động
• interaction-count = Số lần thực hiện chuyển động
• direction = Chuyển động như lần đầu hay đảo ngược

from{...............}to{...............} hiệu ứng bắt đầu đến kết thúc

Ví dụ ta viết hiệu ứng Animation cho body{...... } nó sẽ áp dụng trên toàn trang web như sau:

.class,#id {animation: [myAnimation] 5s linear 3s infinite alternate}
@keyframes [name]{from{...............}to{...............}}
@-webkit-keyframes [name]{from{...............}to{...............}}
@-moz-keyframes [name]{from{...............}to{...............}}
@-o-keyframes [name]{from{opacity:0}to{...............}}

Với [myAnimation] là tên hiệu ứng mình vừa đặt thay thế cho [name] bên dưới

Bảng Thuộc tính của animation trong css3:

Thuộc tính	giá trị	Ví dụ	Mô tả
animation-name	tên animation	animation-name: myAnimation;	Xác định tên cho một animation.
animation-duration	thời gian	animation-duration: 5s;	Xác định thời gian để hoàn thành một chuyển động, mặc định là 0s.
animation-timing-function	linear	animation-timing-function: linear;	Chuyển động sẽ cùng tốc độ từ lúc bắt đầu tới lúc kết thúc.
	ease	animation-timing-function: ease;	Chuyển động ban đầu sẽ chậm, sau đó nhanh, đến lúc kết thúc sẽ từ từ, đây là dạng mặc định.
	ease-in	animation-timing-function: ease-in;	Chuyển động ban đầu sẽ chậm, sau đó nhanh dần.
	ease-out	animation-timing-function: ease-out;	Chuyển động ban đầu sẽ nhanh, sau đó sẽ chậm dần.
	ease-in-out	animation-timing-function: ease-in-out;	Chuyển động ban đầu chậm, sau đó nhanh, đến lúc kết thúc sẽ chậm dần.
	cubic-bezier(n,n,n,n)	animation-timing-function: cubic-bezier(1,1,1,0);	Xác định giá trị riêng cho chuyển động, giá trị sẽ từ 0 tới 1.
animation-delay	thời gian	animation-delay: 3s;	Xác định sau bao lâu thì chuyển động sẽ bắt đầu, mặc định sẽ là 0
animation-iteration-count	số tự nhiên	animation-iteration-count: 4;	Xác định số lần thực hiện chuyển động.
	infinite	animation-iteration-count: infinite;	Chuyển động sẽ thực hiện không giới hạn số lần.
animation-direction	normal	animation-direction: normal;	Chuyển động bình thường, đây là dạng mặc định.
	alternate	animation-direction: alternate;	Chuyển động sẽ được đảo ngược ở chu kỳ tiếp theo.
animation-play-state	paused	animation-play-state: paused;	Xác định chuyển động dừng lại.
	running	animation-play-state: running;	Xác định chuyển động chạy.
animation	[name] [duration] [timing] [delay] [interaction-count] [direction]	animation: myAnimation 5s linear 3s infinite alternate;	Đây là dạng tổng hợp của các thuộc tính trên, ngoại trừ thuộc tính animation-play-state.

Tham khảo nội dung từ: http://hocwebchuan.com/reference/cssSection/css3/pr_animation.php