animation-duration

Jump to: navigation, search

animation-duration


W3C Working Draft

Summary

Defines the length of time an animation takes to complete one cycle.

Overview table

Initial value 0s
Applies to All elements, ::before and ::after pseudo-elements.
Inherited No
Media visual
Computed value As specified.
Animatable No
CSS Object Model Property animationDuration

Syntax

  • animation-duration: <time>


Values

<time>
Can be specified in seconds or milliseconds, e.g., 2s or 150ms. Can also be a comma-separated list of durations, e.g., .25s, .5s, 1s, where each duration is applied to the corresponding ordinal position value of the animation-name property.

The initial value of 0s means the animation takes no time; that is, it is applied instantaneously. When the duration is 0s (or 0ms), animation-fill-mode still applies, such that an animation filling backward will show the value of the 0% keyframe during any delay period, while an animation filling forward will retain the value specified at the 100% keyframe even if the animation was instantaneous. Also, animation events are still fired.


Examples

View live exampleAn animation duration of 5 seconds; runs once, does not repeat.

CSS

div.duration {
    animation-duration: 5s;
}

View live exampleA repeating pulse animation that shrinks and dims an element, then restores it.

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

  • Negative duration values are invalid and cause the entire property value to be ignored.
  • If animation-duration specifies more durations than there are values in animation-name, the excess durations are ignored.
  • If animation-duration specifies fewer durations than there are values in animation-name, the list of durations is repeated as many times as necessary to ensure each animation has a duration.


Related specifications

Specification Status Related Changes
CSS Animations 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- prefixed property is deprecated and should not be used.

See also

Other articles

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