The animation-duration
CSS property sets the length of time that an animation takes to complete one cycle.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
It is often convenient to use the shorthand property animation
to set all animation properties at once.
Syntax
/* Single animation */ animation-duration: 6s; animation-duration: 120ms; /* Multiple animations */ animation-duration: 1.64s, 15.22s; animation-duration: 10s, 35s, 230ms;
Values
<time>
- The time that an animation takes to complete one cycle. This may be specified in either seconds (
s
) or milliseconds (ms
). The value must be 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 definition
Initial value | 0s |
---|---|
Applies to | all elements, ::before and ::after pseudo-elements |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
animation-duration | Chrome
Full support
43
| Edge
Full support
12
| Firefox
Full support
16
| IE
Partial support
10
| Opera
Full support
30
| Safari
Full support
9
| WebView Android
Full support
43
| Chrome Android
Full support
43
| Firefox Android
Full support
16
| Opera Android
Full support
30
| Safari iOS
Full support
9
| Samsung Internet Android
Full support
4.0
|
Legend
- Full support
- Full support
- Partial support
- Partial support
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.
See also
- Using CSS animations
- JavaScript
AnimationEvent
API