Thuộc tính animation trong CSS3
Thuộc tính animation trong css 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 class="panimation">Animationp>
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.panimation {
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:
