Thuộc tính animation
Đị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ỗ […]
Đị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:
| Thuộc tính | giá trị | Mô tả |
|---|---|---|
| animation-name | tên animation | Xác định tên cho một animation. |
| animation-duration | thời gian | Xác định thời gian để hoàn thành một chuyển động, mặc định là 0s. |
| 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 | 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 | Chuyển động ban đầu sẽ chậm, sau đó nhanh dần. | |
| ease-out | Chuyển động ban đầu sẽ nhanh, sau đó sẽ chậm dần. | |
| 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) | Xác định giá trị riêng cho chuyển động, giá trị sẽ từ 0 tới 1. | |
| animation-delay | thời gian | 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 | Xác định số lần thực hiện chuyển động. |
| infinite | Chuyển động sẽ thực hiện không giới hạn số lần. | |
| animation-direction | normal | Chuyển động bình thường, đây là dạng mặc định. |
| alternate | Chuyển động sẽ được đảo ngược ở chu kỳ tiếp theo. | |
| animation-play-state | paused | Xác định chuyển động dừng lại. |
| running | Xác định chuyển động chạy. | |
| animation | [name] [duration] [timing] [delay] [interaction-count] [direction] | Đâ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:
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:
Animation
Trình duyệt 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ợ:
| Trình duyệt PC | Smartphone – Tablets | |
| animation | Internet Explorer 10 | IOS 3.2 (-webkit-) |
| Firefox 5 (-moz-) | Android 2.1 (-webkit-) | |
| Opera 12 (-o-) | Window Phone 8 | |
| Google Chrome 20 (-webkit-) | ||
| Safari 5.1 (-webkit-) |
