When working with CSS animations, you may want to control the number of times an animation repeats, which is where the animation-iteration-count property comes into play. Sometimes, CSS doesn't behave as we expect, especially when it comes to looping animations.
By default, an animation will occur once and then stop. So, if you want your animation to repeat several times, or infinitely for something like a loading animation, you'll need to set a specific number of iterations with the animation-iteration-count property.
Once you know how animation-iteration-count works, you can create engaging repeating animations for your web pages. Let's dive deeper into this property and its usage.
What is animation-iteration-count?
The animation-iteration-count CSS property specifies how many times an animation sequence will play. If the iteration count is finite, the animation will stop after the specified number of cycles. The rule is written as follows:
animation-iteration-count Values
The animation-iteration-count property can take several values. Its main values are infinite and <number>, and the property also accepts the global values initial and inherit. Let’s go through each one now.
infinite
If assigned an animation-iteration-count value of infinite, the animation will repeat infinitely. This is the best value for an animation that you don’t want stopping on its own.
<number>
A numeric value for animation-iteration-count causes the animation to repeat the stated number of times. For example, a value of 3 will cause the animation to cycle three times.
If a value for animation-iteration-count is not specified, this value defaults to 1, and the animation will cycle once. A value of 0 prevents the animation from playing.
You can also use a decimal to stop the animation before completing its final cycle. For example, a value of 2.5 will cause the animation to cycle two and a half times.
initial
The initial value sets the value of animation-iteration-count to its default, 1.
inherit
If inherit is specified, animation-iteration-count will inherit the value from the parent element.
Multiple Values for animation-iteration-count
In the above examples, we’ve assigned just one value to animation-iteration-count, but this property (as well as other CSS animation properties) can handle multiple values as well. This allows you to assign different iteration counts to different animations.
To add multiple values to animation-iteration-count, add values separated by commas, like so:
Listing multiple values for animation-iteration-count (and other CSS animation properties) assigns each value to a value listed with the animation-name property based on the order of the list. The first value of animation-iteration-count applies to the first value of animation-name, the second value of animation-iteration-count applies to the second value of animation-name, and so on.
Here’s an example of using multiple animation-iteration-count values for three different animated properties:
CSS Shorthand for animation-iteration-count
You can also specify the number of animation iterations using the animationshorthand CSS property to use fewer lines of code. For example, in the following code:
… the value 5 sets the number of animation iterations.
Loop Your CSS Animations
With just an extra line of CSS, it’s easy to make your animations loop infinitely for a specified number of iterations. For example, you could apply some subtle movement to make an element appear to “hover” on the page, or apply a fun shaking effect to a button click. You have extensive control over your animations and styling, which is what CSS is all about.
