How to Play Animations Infinitely in CSS

In order to play CSS animations indefinitely, all you have to do is set the animation-iteration-count property to infinite.

@keyframes rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.loading-circle {
    /* We need ‘linear’ for smooth transition */
    animation: rotate 2s linear;
    animation-iteration-count: infinite;
}

Make sure that you return to the initial state in order to create a smooth animation. You can also set an arbitrary number as the iteration count to repeat the animation a number of times.

/* This will play the animation twice */
.animation {
    animation-iteration-count: 2;
}

You can also use a shorthand property, where you can define the animation-iteration-count as the very last rule:

.loading-circle {
    animation: rotate 2s linear infinite;
}

Making a Jumping Box Animation Using Only CSSExploring CSS AnimationsGet your weekly dose of webtipsLearn More

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Resources:

• The animation-iteration-count in CSS