Jump to: navigation, search


W3C Working Draft


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


  • animation-duration: <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.


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


div.duration {
    animation-duration: 5s;

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


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;


  • 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



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


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


This article contains content originally from external sources.

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