animation-iteration-count

The animation-iteration-count CSS property specifiesthe 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.

/* 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;

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

Syntax

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.

Formal syntax

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

Examples

See CSS animations for examples.

Specifications

Browser compatibility

See also

• Using CSS animations
• JavaScript AnimationEvent API