🎯 CSS animation-iteration-count Property

The animation-iteration-count property specifies how many times a CSS animation should repeat. It allows you to control whether an animation runs once, multiple times, or continuously without stopping.

This property is commonly used for loading indicators, attention-grabbing effects, interactive UI elements, and looping animations that need to remain active throughout the user experience.

After an animation completes one cycle, the browser checks the animation-iteration-count value to determine whether the animation should run again. Depending on the value provided, the animation may stop, repeat a specific number of times, or loop forever.

A numeric value specifies exactly how many times the animation should play.

.box {
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-iteration-count: 3;
}
                

In this example, the animation plays three times and then stops automatically.

The infinite value causes the animation to repeat endlessly.

.box {
    animation-name: move;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
                

This is commonly used for loading spinners, rotating icons, and continuously moving elements.

The initial value resets the property to its default CSS value.

.box {
    animation-iteration-count: initial;
}
                

The default value is 1, meaning the animation runs only once.

The following example creates a bouncing animation that repeats three times.

@keyframes bounce {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-30px);
    }

    100% {
        transform: translateY(0);
    }

}

.box {
    animation-name: bounce;
    animation-duration: 1s;
    animation-iteration-count: 3;
}
                

The element moves up and down three times before the animation ends.

The animation-iteration-count property provides precise control over animation repetition, helping developers create engaging and interactive user interfaces.

• Control how many times animations repeat
• Create looping visual effects
• Build animated loading indicators
• Improve user engagement with repeated motion
• Create both temporary and permanent animation effects