Thuộc tính animation-iteration-count trong CSS
Bùi Tấn Lực - 845
- 08/10/2025
Chức năng của Thuộc tính animation-iteration-count trong CSS
Thuộc tính animation-iteration-count trong CSS dùng để quy định số lần lặp lại một animation, là một con số hoặc infinite để lặp lại vô hạn.
Cú pháp của Thuộc tính animation-iteration-count trong CSS
animation-iteration-count: giatri;
giatri: Giá trị để quy định số lần lặp lại một animation (Ví dụ: 2, 3, infinite,....)
Code Thuộc tính animation-iteration-count trong CSS
animation-iteration-count: infinite;
animation-iteration-count: 2;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính animation-iteration-count trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#motlan {
border: 1px solid red;
text-align: center;
padding: 5px;
width: 100px;
position: relative;
animation-name: quaPhai; /* Áp dụng animation có tên "quaPhai" */
animation-duration: 2s; /* Thời gian diễn ra animation là 2s*/
animation-iteration-count: 1; /*số lần một animation sẽ lặp lại là 1*/
}
#hailan {
border: 1px solid red;
text-align: center;
padding: 5px;
width: 100px;
position: relative;
animation-name: quaPhai; /* Áp dụng animation có tên "quaPhai" */
animation-duration: 2s; /* Thời gian diễn ra animation là 2s*/
animation-iteration-count: 2; /*số lần một animation sẽ lặp lại là 2*/
}
#vohan {
border: 1px solid red;
text-align: center;
padding: 5px;
width: 100px;
position: relative;
animation-name: quaPhai; /* Áp dụng animation có tên "quaPhai" */
animation-duration: 5s; /* Thời gian diễn ra animation là 5s*/
animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/
}
@keyframes quaPhai{
from {left: 0px;}
to {left: 100%;}
}
</style>
</head>
<body>
<h1>Code Thuộc tính animation-iteration-count trong CSS</h1>
<p>Dùng để quy định số lần lặp lại một animation, là một con số hoặc infinite để lặp lại vô hạn:</p>
<p><span id="motlan">animation-iteration-count: 1;</span></p>
<p><span id="hailan">animation-iteration-count: 2;</span></p>
<p><span id="vohan">animation-iteration-count: infinite;</span></p>
</body>
</html>
Cách kết hợp animation-iteration-count với các thuộc tính animation khác trong CSS
animation-iteration-count phát huy hiệu quả tốt hơn khi được sử dụng cùng các thuộc tính animation khác. Việc phối hợp đúng giúp kiểm soát số lần lặp, thời gian chuyển động và hướng chạy của hiệu ứng một cách linh hoạt, thay vì chỉ lặp lại một chuyển động giống nhau.
Kết hợp animation-iteration-count với animation-direction
Khi kết hợp animation-iteration-count với animation-direction, mỗi lần lặp có thể được điều khiển theo một hướng khác nhau. Đây là cách hữu ích để tạo hiệu ứng chuyển động qua lại mà không cần viết thêm một animation riêng.
Chẳng hạn, alternate cho phép animation chạy theo hướng bình thường ở lần đầu, sau đó đảo chiều ở lần tiếp theo. Nếu đặt animation-iteration-count: 4, hiệu ứng sẽ thực hiện đủ bốn chu kỳ và luân phiên giữa hai hướng.
.box {
animation-name: move;
animation-duration: 2s;
animation-iteration-count: 4;
animation-direction: alternate;
}
Cách thiết lập này phù hợp với các hiệu ứng như một phần tử di chuyển sang trái rồi quay lại, thay đổi kích thước rồi trở về trạng thái ban đầu hoặc tạo chuyển động nhịp nhàng cho thành phần giao diện.
Kết hợp animation-iteration-count với animation-duration
animation-duration xác định thời gian hoàn thành một chu kỳ, còn animation-iteration-count quyết định chu kỳ đó được thực hiện bao nhiêu lần. Hai thuộc tính này nên được cân nhắc cùng nhau để hiệu ứng không diễn ra quá nhanh hoặc kéo dài ngoài mong muốn.
Ví dụ, một animation có thời lượng 1 giây và lặp 3 lần sẽ thực hiện ba chu kỳ. Nếu tăng thời lượng lên 2 giây nhưng vẫn giữ số lần lặp, chuyển động sẽ chậm hơn nhưng tổng thời gian hiệu ứng cũng tăng theo.
.box {
animation-name: fade;
animation-duration: 1s;
animation-iteration-count: 3;
}
Trong thực tế, nên xác định trước mục đích của hiệu ứng rồi mới chọn số lần lặp và thời lượng phù hợp. Với hiệu ứng nhấn mạnh một trạng thái, vài lần lặp thường đủ; còn hiệu ứng trang trí liên tục có thể sử dụng infinite.
Kết hợp nhiều animation với animation-iteration-count
CSS cho phép một phần tử chạy nhiều animation cùng lúc. Khi đó, mỗi animation có thể sở hữu số lần lặp riêng, giúp tạo chuyển động phức tạp mà vẫn kiểm soát được từng hiệu ứng.
Các giá trị của animation-iteration-count có thể được khai báo theo thứ tự tương ứng với từng animation. Điều này cho phép một hiệu ứng chạy một số lần nhất định trong khi hiệu ứng khác tiếp tục lặp vô hạn.
.box {
animation-name: move, pulse;
animation-duration: 2s, 1s;
animation-iteration-count: 3, infinite;
}
Trong ví dụ trên, animation move chỉ chạy ba lần, còn pulse tiếp tục lặp. Cách kết hợp này đặc biệt hữu ích khi muốn tách các chuyển động như vị trí, độ lớn hoặc trạng thái hiển thị thành những animation độc lập.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính animation-iteration-count trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
