In this section, we will learn what the animation-iteration-count property is and how to use it in CSS.
Click here to run the example of animation-iteration-count property.
CSS animation-iteration-count Property Definition and Usage
Who said that an animation can only occur once?! In fact, we can iterate an animation as much as we want using CSS `animation-iteration-count`.
Note: this property is used for those animations that are created by @keyframes rule.
CSS animation-iteration-count Property Syntax
animation-iteration-count: number|infinite|initial|inherit;
CSS animation-iteration-count Property Value
The value we set for `animation-iteration-count` is any positive number. This number declares the iteration count.
Also, the default value for this property is 1 which means the animation should occur only one time and then stop.
Notes:
- The value 0 means no animation at all.
- We can set the value “infinite” for this property as well. Using this property means the animation should iterate infinitely.
- The two global values, “initial” and “inherit” could also be used for this property.
Example: animation-iteration-count property in CSS
See the Pen animation-iteration-count property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
How Does CSS animation-iteration-count Property Work?
In this example, we’ve set the value of the animation-iteration-count to 3. This means the animation on the target element will iterate for 3 times in a row and then it’ll stop.
