The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.


< css‎ | properties
Jump to: navigation, search


This article is Ready to Use.

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



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.


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


 *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

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