CSS Reference Property

animation-iteration-count

The animation-iteration-count property is used to specify the number of times that an animation cycle is played before the animation stops.

The initial value is ‘1’, meaning the animation will play from beginning to end once.

This property is often used in conjunction with an animation-direction value of alternate, which will cause the animation to play in reverse on alternate cycles. See the live demo section below for a live demo.

You can specify one iteration count or multiple comma-separated iteration counts. When you provide a list of comma-separated iteration counts, this list is usually mapped to a list of values provided by other animation-related properties, such as the animation-delay, animation-timing-function, and animation-name properties, among others. Each list of values in these properties is treated kind of like an array, where each value in a list of values has its own index. Then, each value in a list of values is mapped to its corresponding value with the same index in the list provided in the other properties.

For example, if you provide two animation-iteration-count values, then the first value determines the iteration count of the animation of the first animation in the list of animation names provided by animation-name, and the second iteration count specifies the iteration count of the second animation.

The animation-iteration-count property is usually set as part of the animation property shorthand.

Official Syntax

  • Syntax:

    animation-iteration-count: infinite | <number>
  • Initial: 1
  • Applies To: all elements; and ::before and ::after pseudo-elements
  • Animatable: no

Values

infinite
The animation will repeat infinitely.
<number>
The animation will repeat the specified number of times. If the number is not an integer, the animation will end partway through its last cycle. Negative numbers are invalid. A value of ‘0’ is valid and, similar to an animation-duration of ‘0s’, causes the animation to occur instantaneously.

Examples

The following will repeat an animation infinitely. The animation will proceed in alternate directions, to avoid a “jump” between the cycles. See the live demo below for a live example.

.element {
    /* ... */
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
    /* ... */
}
                

Live Demo

In the following demo, both elements are set to repeat their animation cycle infinitely. The first element has the animation-direction value of alternate, which means that every other cycle will start from the end back to the beginning, while the second element has the default normal direction, which means it will jump back to the beginning of the animation to repeat a cycle.

View this demo on the Codrops Playground

Browser Support

CSS Animation

Complex method of animating certain properties of an element

W3C Working Draft

Supported from the following versions:

Desktop

  • 43
  • 16
  • 10
  • 12
  • 9

Mobile / Tablet

  • 9.0
  • 56
  • No
  • 61
  • 56

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by

Last updated December 11, 2016 at 10:08 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.