8.1 Thuộc tính animation-iteration-count
CSS-animation cho phép tạo ra hiệu ứng trực quan động, cải thiện giao diện người dùng. Bây giờ chúng ta sẽ xem xét hai thuộc tính chính kiểm soát vòng lặp của animation: animation-iteration-count và animation-direction.
Thuộc tính animation-iteration-count xác định số lần animation sẽ được phát lại. Thuộc tính này cho phép kiểm soát liệu animation có chạy một lần, nhiều lần hay vô hạn.
Cú pháp:
element {
animation-iteration-count: number | infinite;
}
Ở đâu:
number: số lần phát lại animation (ví dụ: 1, 2, 3, v.v.)infinite: animation sẽ được phát lại vô hạn
Ví dụ:
HTML
<div class="box"></div>
CSS
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
}
100% {
transform: translateY(0);
}
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
}
Giải thích mã:
@keyframes bounce: xác định animation nâng phần tử lên và sau đó đưa nó trở lại vị trí ban đầuanimation-iteration-count: infinite: thiết lập animation phát lại vô hạn
8.2 Thuộc tính animation-direction
Thuộc tính animation-direction xác định hướng phát lại của animation. Nó cho phép chỉ định liệu animation sẽ phát theo hướng thuận, ngược hay xen kẽ cả hai hướng.
Cú pháp:
element {
animation-direction: normal | reverse | alternate | alternate-reverse;
}
Ở đâu:
normal: animation phát theo hướng thuận (mặc định)reverse: animation phát theo hướng ngược lạialternate: animation xen kẽ giữa hướng thuận và ngược lạialternate-reverse: animation bắt đầu bằng hướng ngược lại, sau đó xen kẽ giữa ngược và thuận
Ví dụ
Phát lại hướng thuận và ngược:
HTML
<div class="box1"></div>
<div class="box2"></div>
CSS
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box1, .box2 {
width: 100px;
height: 100px;
background-color: #2ecc71;
animation-name: moveRight;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.box1 {
animation-direction: normal;
}
.box2 {
animation-direction: reverse;
}
Giải thích mã:
.box1: animation phát theo hướng thuận.box2: animation phát theo hướng ngược lại
Xen kẽ hướng:
HTML
<div class="box1"></div>
<div class="box2"></div>
CSS
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box1, .box2 {
width: 100px;
height: 100px;
background-color: #3498db;
animation-name: moveRight;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.box1 {
animation-direction: alternate;
}
.box2 {
animation-direction: alternate-reverse;
}
Giải thích mã:
.box1: animation xen kẽ giữa hướng thuận và ngược.box2: animation bắt đầu bằng hướng ngược, sau đó xen kẽ giữa ngược và thuận
8.3 Ví dụ sử dụng cả hai thuộc tính
Phần tử đung đưa
- Ví dụ này minh họa phần tử đung đưa, di chuyển qua lại trái phải:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Phần tử đung đưa</title>
<style>
@keyframes swing {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(10deg);
}
100% {
transform: rotate(0deg);
}
}
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
animation: swing 1s infinite alternate-reverse;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Giải thích mã:
@keyframes swing: xác định animation xoay phần tử.box: phần tử có animationswingđược áp dụng, với thời lượng 1 giây, phát lại vô hạn và bắt đầu từ hướng ngược lại
GO TO FULL VERSION