CSS animation-iteration-count Property


Example

Play the animation two times:

div {
  animation-iteration-count: 2;
}
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The animation-iteration-count property specifies the number of times an animation should be played.

Default value: 1
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.animationIterationCount="infinite" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

Property
animation-iteration-count 43.0
4.0 -webkit-
10.0 16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-


CSS Syntax

animation-iteration-count: number|infinite|initial|inherit;

Property Values

Value Description Demo
number A number that defines how many times an animation should be played. Default value is 1 Play it »
infinite Specifies that the animation should be played infinite times (for ever) Play it »
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Play the animation forever:

div {
  animation-iteration-count: infinite;
}
Try it Yourself »

Related Pages

CSS tutorial: CSS Animations

HTML DOM reference: animationIterationCount property


Copyright 1999-2023 by Refsnes Data. All Rights Reserved.