Previous Lesson Next Lesson

Thuộc tính @keyframes trong CSS3

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ụ

HTML viết:

<html>
<head></head>
<body>
<p>HỌC LẬP TRÌNH</p>
</body>
</html>

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

HỌC LẬP TRÌNH

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 LẬP TRÌNH