W3cubDocs

/CSS

animation-iteration-count

The animation-iteration-count CSS property sets the number of times an animation cycle should be played before stopping.

If multiple values are specified, each time the animation is played the next value in the list is used, cycling back to the first value after the last one is used.

It is often convenient to use the shorthand property animation to set all animation properties at once.

Syntax

/* Keyword value */
animation-iteration-count: infinite;

/* <number> values */
animation-iteration-count: 3;
animation-iteration-count: 2.4;

/* Multiple values */
animation-iteration-count: 2, 0, infinite;

The animation-iteration-count property is specified as one or more comma-separated values.

Values

infinite: The animation will repeat forever.
<number>: The number of times the animation will repeat; this is 1 by default. You may specify non-integer values to play part of an animation cycle: for example, 0.5 will play half of the animation cycle. Negative values are invalid.

Note: When you specify multiple values on an animation-* property, they will be assigned to the animations specified in the animation-name property in different ways depending on how many there are. For more information, see Setting multiple animation property values.

Formal syntax

<single-animation-iteration-count>#where 
<single-animation-iteration-count> = infinite | <number>

Examples

See CSS animations for examples.

Specifications

Specification	Status	Comment
CSS Animations The definition of 'animation-iteration-count' in that specification.	Working Draft	Initial definition.

Initial value	`1`
Applies to	all elements, `::before` and `::after` pseudo-elements
Inherited	no
Media	visual
Computed value	as specified
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

Browser compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	43 43 Yes Prefixed Prefixed Requires the vendor prefix: -webkit-	12 12 12 Prefixed Prefixed Requires the vendor prefix: -webkit-	16 16 49 Prefixed Prefixed Requires the vendor prefix: -webkit- 44 Prefixed Disabled Prefixed Requires the vendor prefix: -webkit- Disabled From version 44: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config. 5 Prefixed Prefixed Requires the vendor prefix: -moz-	10	30 30 15 Prefixed Prefixed Requires the vendor prefix: -webkit- 12.1 — 15 12 — 15 Prefixed Prefixed Requires the vendor prefix: -o-	Yes Yes 4 Prefixed Prefixed Requires the vendor prefix: -webkit-

	Mobile
	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	43 43 Yes Prefixed Prefixed Requires the vendor prefix: -webkit-	43 43 Yes Prefixed Prefixed Requires the vendor prefix: -webkit-	Yes Yes Yes Prefixed Prefixed Requires the vendor prefix: -webkit-	16 16 49 Prefixed Prefixed Requires the vendor prefix: -webkit- 44 Prefixed Disabled Prefixed Requires the vendor prefix: -webkit- Disabled From version 44: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config. 5 Prefixed Prefixed Requires the vendor prefix: -moz-	30 30 15 Prefixed Prefixed Requires the vendor prefix: -webkit- 12.1 — 14 12 — 14 Prefixed Prefixed Requires the vendor prefix: -o-	Yes Yes Yes Prefixed Prefixed Requires the vendor prefix: -webkit-	4.0 4.0 Yes Prefixed Prefixed Requires the vendor prefix: -webkit-