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

Attributions

Microsoft Developer Network: Windows Internet Explorer API reference Article