CSS animation-iteration-count Property

The 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 ::before and ::after pseudo-elements. This property is not inheritable.

Syntax

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;

Acceptable Values

infinite

In this case, the animation will repeat forever.

<number>

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.

Examples

In the second and third case, I am using the animation-fill-mode property to keep the circle in its final state.

See the Pen CSS animation-iteration-count Property by Tutorialio (@tutorialio) on CodePen.

Browser Support

The CSS 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

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

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.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top