animation-iteration-count

< css‎ | properties
Jump to: navigation, search

animation-iteration-count

This article is Almost Ready.


W3C Working Draft

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.

Compatibility

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
?
prefix
?
Unknown
10
Yes
12
prefix
12.10
Yes
4.0
prefix

Mobile

FeaturesAndroidFirefox MobileIE PhoneOpera MobileSafari Mobile
Basic support
?
prefix
5.0
prefix
16.0
Yes
?
Unknown
?
Unknown
?
Unknown


Examples

View live exampleA 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.

CSS

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;
    }
}

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

Specification Status Related Changes
CSS Animations W3C Working Draft

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ? ? ? ?

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?


Compatibility notes

Browser Version Note
Internet Explorer 10.0 The -ms- prefix property is deprecated and should not be used.

See also

Other articles

External resources

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: Windows Internet Explorer API reference Article