animation-duration

< css‎ | properties
Jump to: navigation, search

animation-duration

This article is Almost Ready.


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
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.


Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

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

Mobile

FeaturesAndroidFirefox MobileIE PhoneOpera MobileSafari Mobile
Basic support
2.0
prefix
5.0
prefix
16.0
Yes
?
none
?
none
4.2
prefix


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

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