Định nghĩa và sử dụng @keyframes
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.
@keyframes có các giá trị như sau:
| Thuộc tính | giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| @keyframes | Tên animation | @keyframes aniName{} | Xác định tên cho @keyframes. |
| from {thuộc tính: giá trị;} to {thuộc tính: giá trị;} | from {top: 0;} to {bottom: 100px; color: red;} | Đị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ị;} | 0% {top: 0;} 50% {top: 150px;} 100% {top: 50px;} | Định dạng thành phần theo phần trăm thời gian hành động diễn ra. |
Ví dụ
Xem thêm ví dụHTML viết:
<html> <head></head> <body> <p>HỌC TV</p> </body> </html>
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 khi có CSS:
HỌC TV
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 @keyframes:
