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.

Ví dụ

Xem thêm ví dụ

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

@keyframes	10	4 -moz-	12 -o-	19 -webkit-	5.1 -webkit-	3.2 -webkit-	2.1 -webkit-	8

Link liên quan

font-size-adjust

nav