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;
}
animation.css
Copied to clipboard!

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;
}
animation.css
Copied to clipboard!

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;
}
animation.css
Copied to clipboard!
How to play animations infinitely in CSS
If you would like to see more Webtips, follow @flowforfrank

Making a Jumping Box Animation Using Only CSS

Resources:

Remove ads
Remove ads

📚 Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕

Get access Support us
Remove ads Read more on
Remove ads
Remove ads
🎉 Thank you for subscribing to our newsletter. x This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.