This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

animation-iteration-count

Summary

Specifies how many times an animation cycle should play.

Overview table

Initial value
1
Applies to
All elements, ::before and ::after pseudo-elements.
Inherited
No
Media
visual
Computed value
As specified.
Animatable
No

CSS Object Model Property
:

Percentages
N/A

Syntax

  • animation-iteration-count: <single-animation-iteration-count>
  • animation-iteration-count: infinite

Values

<single-animation-iteration-count>
The animation plays the specified number of times. Can also be a comma-separated list of counts, e.g., 5, 2, 10, where each duration is applied to the corresponding ordinal position value of the animation-name property. Negative values are not allowed. You may specify non-integer values to play part of an animation cycle (for example 0.5 will play half of the animation cycle).
infinite
Loop the animation indefinitely.

Examples

A repeating pulse animation that shrinks and dims an element, then restores it. Change the animation-iteration-count from infinite to a number to see the effect.

div.selected {
    animation-name: pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes pulse {
    from {
        transform : scale(1) translateX(0);
        opacity : 1;
    }
    50% {
        transform : scale(0.75) translateX(0);
        opacity : 0.25;
    }
    to {
        transform : scale(1) translateX(0);
        opacity : 1;
    }
}

View live example

Usage

 This property accepts non-integer values, such as 1.5 or 2.75. If a non-integer value is specified, the animation terminates mid-cycle. Negative numbers are not valid.

This property is often used in conjunction an animation-direction value of alternate, which will cause the animation to play in reverse on alternate cycles.

Related specifications

CSS Animations
W3C Working Draft

See also

Other articles

External resources

Attributions