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 (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | 3.0-webkit 43.0 |
(Yes)-webkit (Yes) |
5.0 (5.0)-moz 16.0 (16.0)[1] |
10 | 12-o 12.10 |
4.0-webkit |
Feature | Android | Chrome | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support | 2.0-webkit | ? | (Yes)-webkit (Yes) |
5.0 (5.0)-moz 16.0 (16.0)[1] |
No support | No support | 4.2-webkit | 43.0 |
[1] In addition to the unprefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit-
prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit
, defaulting to false
. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true
.
See also
- Using CSS animations
- JavaScript
AnimationEvent
API