Định nghĩa và sử dụng
Thuộc tính animation xác định một chuyển động của một tag hay một hình ảnh, là sự tổng hợp của các thuộc tính: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction.
Cấu trúc
tag { animation: giá trị; -moz-animation: giá trị; -webkit-animation: giá trị; -o-animation: giá trị; }
Trong đó:
- -moz-animation hỗ trợ cho firefox.
- -webkit-animation hỗ trợ cho Google Chrome và Safari.
- -o-animation hỗ trợ cho Opera.
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. |
Ví dụ
HTML viết:
<html> <head></head> <body> <p>Animation</p> </body> </html>
CSS viết:
p { border: 1px solid red; text-align: center; width: 100px; }
Hiển thị trình duyệt khi chưa có CSS:
Animation
CSS viết:
p { border: 1px solid red; text-align: center; width: 100px; position: relative; animation: myAnimation 5s ease-out infinite; -moz-animation: myAnimation 5s ease-out infinite; -webkit-animation: myAnimation 5s ease-out infinite; -o-animation: myAnimation 5s ease-out infinite; } @keyframes myAnimation { from {left: 0px;} to {left: 200px;} } /* Hien thi cho Firefox */ @-moz-keyframes myAnimation { from {left: 0px;} to {left: 200px;} } /* Hien thi cho Safari and Chrome */ @-webkit-keyframes myAnimation { from {left: 0px;} to {left: 200px;} } /* Hien thi cho Opera */ @-o-keyframes myAnimation { from {left: 0px;} to {left: 200px;} }
Hiển thị trình duyệt khi có CSS:
Animation
Trình duyệt và hệ điều hành hỗ trợ
Yêu cầu phiên bản trình duyệt và hệ điều hành tối thiểu được hỗ trợ cho thuộc tính animation:
Trình duyệt PC | Smartphone - Tablets | |||||||
animation | 10 | 5 -moz- |
12 -o- |
20 -webkit- |
5.1 -webkit- |
3.2 -webkit- |
2.1 -webkit- |
8 |