The animation-iteration-count CSS property specifies the number of times an animation cycle should be played before stopping. This property can accept a number or the keyword infinite to make the animation loop endlessly. By controlling the repetition, you can create a wide range of effects, from a single, attention-grabbing movement to a continuous, looping background animation.
Example 1: Single Iteration
/* This div will animate once. */
div {
animation-name: slide-in;
animation-duration: 2s;
animation-iteration-count: 1; /* The animation will play only one time. */
}
@keyframes slide-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0%);
}
}
Explanation: The animation-iteration-count is set to 1, which is the default value. This causes the slide-in animation to execute from beginning to end a single time.
Example 2: Multiple Iterations
/* This element will pulse three times. */
.pulse-element {
animation-name: pulse;
animation-duration: 1s;
animation-iteration-count: 3; /* The animation will repeat three times. */
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
Explanation: By setting animation-iteration-count to 3, the pulse animation will run for a total of three cycles before the element comes to a rest in its final state.
Example 3: Infinite Iteration
/* This loading spinner will rotate continuously. */
.loader {
animation-name: spin;
animation-duration: 1.5s;
animation-iteration-count: infinite; /* The animation will loop forever. */
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Explanation: The keyword infinite makes the animation repeat indefinitely. This is commonly used for creating loading spinners, background effects, or any animation that needs to be continuous.
Example 4: Fractional Iteration
/* The animation will play one and a half times. */
.half-way {
animation-name: color-change;
animation-duration: 4s;
animation-iteration-count: 1.5; /* The animation stops midway through its second run. */
}
@keyframes color-change {
from {
background-color: lightblue;
}
to {
background-color: steelblue;
}
}
Explanation: This example uses a decimal value, 1.5. The animation will complete one full cycle and then proceed halfway through the second cycle before stopping.
Example 5: Zero Iterations
/* This animation will not play at all. */
.no-animation {
animation-name: fade-out;
animation-duration: 3s;
animation-iteration-count: 0; /* The animation is prevented from running. */
}
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
Explanation: Setting the animation-iteration-count to 0 effectively disables the animation. The element will remain in its initial state without any animation occurring.
Example 6: Using the animation Shorthand Property
/* The animation is defined to run four times using shorthand. */
.shorthand-example {
/* animation: name duration timing-function delay iteration-count direction; */
animation: bounce 2s ease-in-out 0s 4; /* The '4' represents the iteration count. */
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
Explanation: The animation shorthand property allows you to set multiple animation properties in a single line. In this case, the number 4 is recognized as the value for animation-iteration-count.
Example 7: Multiple Animations with Different Counts
/* This element has two animations with different iteration counts. */
.multi-animation {
animation-name: move, glow;
animation-duration: 3s, 1.5s;
animation-iteration-count: 2, infinite; /* 'move' runs twice, 'glow' runs infinitely. */
}
@keyframes move {
from { left: 0px; }
to { left: 200px; }
}
@keyframes glow {
50% { box-shadow: 0 0 20px yellow; }
}
Explanation: You can apply multiple animations to a single element and control their iteration counts separately. The move animation will play twice, while the glow animation will loop forever.