The animation-duration
CSS property specifies the length of time that an animation should take to complete one cycle.
/* Single animation */ animation-duration: 6s; animation-duration: 120ms; /* Multiple animations */ animation-duration: 1.64s, 15.22s; animation-duration: 10s, 35s, 230ms;
It is often convenient to use the shorthand property animation
to set all animation properties at once.
Initial value | 0s |
---|---|
Applies to | all elements, ::before and ::after pseudo-elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
Values
<time>
- The duration that an animation takes to complete one cycle. This may be specified in either seconds (
s
) or milliseconds (ms
). The value must positive or zero and the unit is required. A value of0s
, which is the default value, indicates that no animation should occur.
Note: Negative values are invalid, causing the declaration to be ignored. Some early, prefixed, implementations may consider them as identical to 0s
.
Note: When you specify multiple comma-separated values on an animation-*
property, they will be assigned to the animations specified in the animation-name
property in different ways depending on how many there are. For more information, see Setting multiple animation property values.
Formal syntax
<time>#
Examples
See CSS animations for examples.
Specifications
Specification | Status | Comment |
---|---|---|
CSS Animations The definition of 'animation-duration' in that specification. |
Working Draft | Initial definition. |
Browser compatibility
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 43 3 -webkit- | Yes Yes -webkit- | 16 49 -webkit- 5 -moz- | 10 | 12.1 — 15 15 -webkit- 12 — 15 -o- | 4 -webkit- |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | Yes 2 -webkit- | 43 Yes -webkit- | Yes Yes -webkit- | 16 49 -webkit- 5 -moz- | Yes | 12.1 — 15 15 -webkit- 12 — 15 -o- | 4.2 -webkit- |
1. From version 44: this feature is behind the layout.css.prefixes.webkit
preference (needs to be set to true
). To change preferences in Firefox, visit about:config.
See also
- Using CSS animations
- JavaScript
AnimationEvent
API