animation-iteration-count property is used to specify the number of times that an animation cycle should be played before the animation stops.
The initial value of this property is 1. You can apply it to all elements including well as
::after pseudo-elements. This property is not inheritable.
This is the formal syntax for using the
animation-iteration-count property —
animation-iteration-count: infinite | <number>
Here are some examples of using this property —
animation-iteration-count: infinite; animation-iteration-count: 3; animation-iteration-count: 2.3;
In this case, the animation will repeat forever.
In this case, the given number will determine how many times the animation should repeat. The default value is 1 and negative values are invalid. You may specify non-integer values to play part of an animation cycle (for example 0.5 will play half of the animation cycle). A value of ‘0’ is valid and but it won’t play any animation at all.
In the second and third case, I am using the animation-fill-mode property to keep the circle in its final state.
animation-iteration property is fully supported in 93.99% browsers.
This property is partially supported in Android 3+ and fully supported in IE 10+, Edge 12+, Firefox 16+, Chrome 43+, Safari 9+, Opera 30+, iOS Safari 9.0-9.2+, Android 53+ and Chrome for Android 55+.
The browser stats were taken from caniuse.com
2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.