Ví dụ về thuộc tính @keyframes

Thuộc tính @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.

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: 150px;
    animation: amiName 10s infinite;
    -moz-animation: amiName 10s infinite;
    -webkit-animation: amiName 10s infinite;
    -o-animation: amiName 10s infinite;
}

@keyframes amiName {
    0% { left: 0px; }
    50% { left: 80%; color: #cc0000; background: #cccccc; }
    100% { left: 0px; }
}

@-moz-keyframes amiName {
    0% { left: 0px; }
    50% { left: 80%; color: #cc0000; background: #cccccc; }
    100% { left: 0px; }
}

@-webkit-keyframes amiName {
    0% { left: 0px; }
    50% { left: 80%; color: #cc0000; background: #cccccc; }
    100% { left: 0px; }
}

@-o-keyframes amiName {
    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

Thuộc tính @keyframes với giá trị form{} và to{}

Thuộc tính @keyframes với giá trị form{} và to{}: Định dạng thành phần theo trí đầu và vị trí cuối.

Đổi giá trị @keyframes thành form{} và to{}, CSS viết:

p {
    position: relative;
    width: 150px;
    animation: amiName 10s infinite;
    -moz-animation: amiName 10s infinite;
    -webkit-animation: amiName 10s infinite;
    -o-animation: amiName 10s infinite;
}

@keyframes amiName {
    from { left: 0px; }
    to { left: 80%; color: #cc0000; background: #cccccc; }
}

/* Hien thi cho Firefox */
@-moz-keyframes amiName {
    from { left: 0px; }
    to { left: 80%; color: #cc0000; background: #cccccc; }
}

/* Hien thi cho Safari and Chrome */
@-webkit-keyframes amiName {
    from { left: 0px; }
    to { left: 80%; color: #cc0000; background: #cccccc; }
}

/* Hien thi cho Opera */
@-o-keyframes amiName {
    from { left: 0px; }
    to { left: 80%; color: #cc0000; background: #cccccc; }
}

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

HỌC WEB CHUẨN

Thuộc tính @keyframes với giá trị %

Thuộc tính @keyframes với giá trị %: Định dạng thành phần theo phần trăm thời gian hành động diễn ra.

Đổi giá trị @keyframes thành %, CSS viết:

p {
    position: relative;
    width: 150px;
    animation: amiName 10s infinite;
    -moz-animation: amiName 10s infinite;
    -webkit-animation: amiName 10s infinite;
    -o-animation: amiName 10s infinite;
}

@keyframes amiName {
    0% { left: 0px; }
    50% { left: 80%; color: #cc0000; background: #cccccc; }
    30% { left: 80%; color: #000000; background: #0000cc; }
    100% { left: 0px; }
}

/* Hien thi cho Firefox */
@-moz-keyframes amiName {
    0% { left: 0px; }
    50% { left: 80%; color: #cc0000; background: #cccccc; }
    30% { left: 80%; color: #000000; background: #0000cc; }
    100% { left: 0px; }
}

/* Hien thi cho Safari and Chrome */
@-webkit-keyframes amiName {
    0% { left: 0px; }
    50% { left: 80%; color: #cc0000; background: #cccccc; }
    30% { left: 80%; color: #000000; background: #0000cc; }
    100% { left: 0px; }
}

/* Hien thi cho Opera */
@-o-keyframes amiName {
    0% { left: 0px; }
    50% { left: 80%; color: #cc0000; background: #cccccc; }
    30% { left: 80%; color: #000000; background: #0000cc; }
    100% { left: 0px; }
}

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

HỌC WEB CHUẨN