@keyframes CSS3 là một trong những quy tắc áp dụng chuyển động các phần tử HTML. Khi bạn học về CSS chắc chắn rằng sẽ bắt gặp @keyframes. Vậy làm thế nào nắm rõ các quy tắc sử dụng? Bài viết này Quách Quỳnh sẽ trả lời câu hỏi này cho bạn.
@keyframes trong CSS là gì?
Quy tắc @keyframes được sử dụng để điều khiển diễn biến một hoạt động của thành phần HTML, nó được dùng kèm với thuộc tính animation.
Sự chuyển động của phần tử được tạo ra bằng cách thay đổi dần dần từ một tập hợp các kiểu CSS này sang một tập hợp các kiểu CSS khác.
Thời điểm thay đổi kiểu sẽ xảy ra theo phần trăm hoặc với các từ khóa “from” và “to”, 0% là lúc bắt đầu chuyển động, 100% là kết thúc.
Cách sử dụng @keyframes trong CSS3
Quy tắc viết khá đơn giản:
@keyframes thisMove {
/* Code CSS */
}
@-moz-keyframes thisMove {
}
@-webkit-keyframes thisMove {
}
Tiếp theo tại class của một CSS:
.boxContainer {
animation: thisMove 2s infinite;
}
Hãy thực hiện ví dụ sau đây:
<!DOCTYPE html>
<html>
<head>
<style>
.boxContainer {
width: 199px;
height: 199px;
background: green;
position: relative;
animation: thisMove 2s infinite;
}
@keyframes thisMove {
from {top: 0px;}
to {top: 150px;}
}
</style>
</head>
<body>
<div class="boxContainer"></div>
</body>
</html>
Giá trị của @keyframe
1. Giá trị from to
From to sẽ định dạng thành phần theo trí đầu và vị trí cuối.
from {
thuộc tính: giá trị;
}
to {
thuộc tính: giá trị;
}
Như ví dụ ở trên chính là from to.
2. Giá trị phần trăm
Phần trăm sẽ định dạng thành phần theo phần trăm thời gian hành động diễn ra.
Phần trăm {
thuộc tính: giá trị;
}
Cũng ví dụ trên giờ sẽ thay bằng
0 {top: 0px;}
50% {top: 150px;}
Bạn cũng có thể thay đổi giá trị animation:
animation: thisMove 5s linear; animation: thisMove 5s ease-in-out;
Sử dụng cho các trình duyệt:
/* Google Chrome */ @-webkit- /* Firefox */ @-moz /* Opera */ @-o-
Một ví dụ khác:
Vậy là chúng ta đã vừa tìm hiểu về @keyframes trong CSS3. Sau khi đọc xong bạn sẽ thực hành tạo chuyển động cho một phần tử nào đó bằng cách dùng kết hợp với animation.
