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;
}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;
}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;
}Copied to clipboard!
Resources:
Remove ads
Want to get weekly updates to your mailbox? 📬
📚 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
