Abakada: Back to Basics > Language References > CSS Properties > Animation Properties > animation-iteration-count Property

Specifies the number of times an animation cycle is played.

The property is read/write with a default value of 1; this attribute is not inherited.

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

animation-iteration-count is specified as the keyword infinite, or as a number from 1 to infinity ( ∞ ).

#target {
   animation-name: slide;
   animation-duration: 2s;
   animation-iteration-count: 6;
}

The value defaults to 1 if animation-iteration-count is not specified.

Non-integer values will play the animation until partway through its last cycle.

#target {
   animation-name: bounce;
   animation-duration: 1.5s;
   animation-iteration-count: 1.5;
}

Which means the animation will play up to half of its last animation cycle.

A zero value means zero times an animation should be played ( no animation ). Negative values are invalid.

NOTE: While the separate animation properties can be set individually, the shorthand animation property offers a convenient option to set all animation properties at once.

The following basic animation examples demonstrate use of the animation-iteration-count property.

Basic Animation: Slide and Resize Run Sample | View Source

Basic Animation: Diagonal Glide with Rotate Run Sample | View Source

Basic Animation: Text and Image Bounce Run Sample | View Source

The following examples show the animation-iteration-count property used within the animation shorthand property.

Basic Animation: Slide Swap Images Run Sample | View Source

Basic Animation: Image Crossfade Run Sample | View Source

For a brief overview, please see Understanding and Using CSS Animations.

animation, animation-composition, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-name, animation-play-state, animation-timeline, animation-timing-function