πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.
How to Play Animations Infinitely in CSS

How to Play Animations Infinitely in CSS

Ferenc Almasi β€’ 2020 November 04 β€’ Read time 1 min read
  • twitter
  • facebook
CSS

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

Copied to clipboard! Playground
@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

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.

Copied to clipboard!
/* This will play the animation twice */
.animation {
    animation-iteration-count: 2;
}
animation.css

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

Copied to clipboard!
.loading-circle {
    animation: rotate 2s linear infinite;
}
animation.css
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:

  • twitter
  • facebook
CSS
Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access 100+ interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Prepare for technical interviews
Become a Pro

Courses

Recommended

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.