CSS Reference Property

animation-iteration-count zg12

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

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-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 3xs5l

Syntax:

animation-iteration-count: infinite | <number>

Initial: 1
Applies To: all elements; and ::after pseudo-elements
Animatable: no

Values u704t

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 2h2053

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 6b4m17

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 572e63

CSS Animation 2x1m4x

Complex method of animating certain properties of an element

W3C Working Draft

ed from the following versions:

Desktop ea5q

Mobile / Tablet 6s2f12

* denotes prefix required.

ed:
Yes
No
Partially
Polyfill

Stats from caniuse.com

Referencia de CSS3 553b52