Đị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.

Danh ngôn cuộc sống:

• Bài viết được đăng bởi: Mr. Phan Nhan
• Ngày cập nhật bài viết: 14/05/2016
• Tổng lược xem trang: 328 / 1 khách
• Đánh giá bởi người dùng:

Đị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.
HTML viết:

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

Thuộc tính @keyframes với giá trị form{} và to{}: Định dạng thành phần theo vị trí đầu và vị trí cuối. Đổi giá trị @keyframes thành form{} và to{} (điều khiển thành phần chạy từ trái qua phải), CSS viết:

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 % (di chuyển thành phần chạy qua lại chậm dầ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; }
30% { left: 80%; color: #000000; background: #0000cc; }
100% { left: 0px; }
}
@-moz-keyframes amiName {
0% { left: 0px; }
50% { left: 80%; color: #cc0000; background: #cccccc; }
30% { left: 80%; color: #000000; background: #0000cc; }
100% { left: 0px; }
}
@-webkit-keyframes amiName {
0% { left: 0px; }
50% { left: 80%; color: #cc0000; background: #cccccc; }
30% { left: 80%; color: #000000; background: #0000cc; }
100% { left: 0px; }
}
@-o-keyframes amiName {
0% { left: 0px; }
50% { left: 80%; color: #cc0000; background: #cccccc; }
30% { left: 80%; color: #000000; background: #0000cc; }
100% { left: 0px; }

Những bài viết được đăng mới nhất.

» Công cụ xóa dấu Tiếng việt