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 }
}

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.

HTML viết:

<html>
<head></head>
<body>
<p>HỌC WEB CHUẨN</p>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

HỌC WEB CHUẨN

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 WEB CHUẨN

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:

  Trình duyệt PC Smartphone - Tablets
Internet Explorer Firefox Opera Chrome Safari IOS Android Window phone
@keyframes 10 4
-moz-
12
-o-
19
-webkit-
5.1
-webkit-
3.2
-webkit-
2.1
-webkit-
8