CSS - animation-duration
The animation-duration
CSS property specifies the length of time that an animation should take to complete one cycle.
Example
See CSS animations for examples.
Syntax
animation-duration: 6s; animation-duration: 120ms; animation-duration: 1s, 15s; animation-duration: 10s, 30s, 230ms;
Values
<time>
- The duration that an animation should take to complete one cycle. This may be specified in either seconds (by specifying
s
as the unit) or milliseconds (by specifyingms
as the unit). If you don't specify a unit, the declaration will be invalid.
0s
.Formal syntax
<a title="Possible values: a number followed by's' or 'ms', like 3s, -2.5ms or 0s." href="css/time"><time></a><a title="Hash mark" href="css/value_definition_syntax#hash_mark_(.23)">#</a>
Description
The animation-duration
CSS property specifies the length of time that an animation should take to complete one cycle.
A value of 0s
, which is the default value, indicates that no animation should occur.
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 |
Animatable | no |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
See Also
Specifications
Specification | Status | Comment |
---|---|---|
CSS Animations The definition of 'animation-duration' in that specification. |
Working Draft | Initial definition |
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 3.0-webkit 43.0 |
5.0 (5.0)-moz 16.0 (16.0)[1] |
10 | 12-o 12.10 |
4.0-webkit |
Feature | Android | Chrome | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | 2.0-webkit | ? | 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
.
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/animation-duration