🎯 CSS animation-iteration-count Property

The animation-iteration-count property defines how many times a CSS animation should repeat. It allows developers to run an animation once, repeat it a specific number of times, or make it loop endlessly.

This property is frequently used in interactive user interfaces, loading animations, notification effects, and decorative visual elements that require repeated motion.

Every animation consists of one or more cycles. After completing a cycle, the browser checks the value of animation-iteration-count to determine whether the animation should stop or continue.

A numeric value specifies the exact number of times the animation should play.

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

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

The infinite value causes the animation to repeat forever.

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

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

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

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

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

The following example creates a bouncing effect that repeats three times before stopping.

@keyframes bounce {

    0% {
        transform: translateY(0);
    }

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

    100% {
        transform: translateY(0);
    }

}

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

The element moves up and down three times and then returns to its original state.

The animation-iteration-count property provides full control over animation repetition, helping developers create engaging and interactive web experiences.

• Specify an exact number of animation repeats
• Create infinite looping animations
• Build loading indicators and spinners
• Improve user interaction with motion effects
• Create both temporary and continuous animations