This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

animation-duration

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
Percentages
N/A

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

An animation duration of 5 seconds; runs once, does not repeat.

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

View live example

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

View live example

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

CSS Animations
Working Draft

See also

Other articles

Attributions