Thuộc tính @keyframes
Định nghĩa và sử dụng Thuộc tính @keyframes dùng để điều khiển diễn biến một hoạt động của thành phần, được dùng kèm với thuộc tính animation. Cấu trúc @keyframes tênAnimation { giá trị { css } } @-moz-keyframes tênAnimation { giá trị { css } } @-webkit-keyframes tênAnimation { giá trị { css } } […]
Định nghĩa và sử dụng
Thuộc tính @keyframes dùng để điều khiển diễn biến một hoạt động của thành phần, được dùng kèm với thuộc tính animation.
Cấu trúc
@keyframes tênAnimation {
giá trị { css }
}
@-moz-keyframes tênAnimation {
giá trị { css }
}
@-webkit-keyframes tênAnimation {
giá trị { css }
}
Trong đó:
- @-moz-keyframes hỗ trợ cho firefox.
- @-webkit-keyframes hỗ trợ cho Google Chrome và Safari.
Thuộc tính:
| Thuộc tính | giá trị | Mô tả |
|---|---|---|
| @keyframes | Tên animation | Xác định tên cho @keyframes. |
| from {thuộc tính: giá trị;} to {thuộc tính: giá trị;} |
Định dạng thành phần theo trí đầu và vị trí cuối. | |
| Phần trăm {thuộc tính: giá trị;} | Định dạng thành phần theo phần trăm thời gian hành động diễn ra. |
Ví dụ
Html viết:
<html> <head></head> <body> <p>HỌC HTML - CSS</p> </body> </html>
Hiển thị trình duyệt khi chưa có CSS:
HỌC HTML – CSS
CSS viết:
p {
position: relative;
width: 130px;
animation: aniName 10s infinite;
-moz-animation: aniName 10s infinite;
-webkit-animation: aniName 10s infinite;
-o-animation: aniName 10s infinite;
}
@keyframes aniName {
0% { left: 0px; }
50% { left: 80%; color: #cc0000; background: #cccccc; }
100% { left: 0px; }
}
@-moz-keyframes aniName {
0% { left: 0px; }
50% { left: 80%; color: #cc0000; background: #cccccc; }
100% { left: 0px; }
}
@-webkit-keyframes aniName {
0% { left: 0px; }
50% { left: 80%; color: #cc0000; background: #cccccc; }
100% { left: 0px; }
}
@-o-keyframes aniName {
0% { left: 0px; }
50% { left: 80%; color: #cc0000; background: #cccccc; }
100% { left: 0px; }
}
Hiển thị trình duyệt:
HỌC HTML – CSS
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 | |
| @keyframes | Internet Explorer 10 | IOS 3.2 (-webkit-) |
| Firefox 4 (-moz-) | Android 2.1 (-webkit-) | |
| Opera 12 (-o-) | Window Phone 8 | |
| Google Chrome 19 (-webkit-) | ||
| Safari 5.1 (-webkit-) |
