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
The animation has an animation-duration of 0.7 seconds
HTML
<div class="box"></div>
CSS
.box {
background-color: rebeccapurple;
border-radius: 10px;
width: 100px;
height: 100px;
animation-name: rotate;
animation-duration: 0.7s;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
See CSS animations for more examples.
Specifications
Specification | Status | Comment |
---|---|---|
CSS AnimationsThe definition of 'animation-duration' in that specification. | Working Draft | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
animation-duration
|
Chrome Full support 43 Full support 43 Full support 3 Prefixed' Implemented with the vendor prefix: -webkit- |
Edge Full support 12 Full support 12 Full support 12 Prefixed' Implemented with the vendor prefix: -webkit- |
Firefox Full support 16 Full support 16 Full support 49 Prefixed' Implemented with the vendor prefix: -webkit- Full support 44 Prefixed' Implemented with the vendor prefix: -webkit-
Disabled' From version 44: this feature is behind the Prefixed' Implemented with the vendor prefix: -moz- |
IE Partial support 10 Partial support 10 Notes' Once the element has loaded, changing the value of this property has no effect. |
Opera Full support 30 Full support 30 Full support 15 Prefixed' Implemented with the vendor prefix: -webkit- No support 12.1 — 15 No support 12 — 15 Prefixed' Implemented with the vendor prefix: -o- |
Safari Full support 9 Full support 9 Full support 4 Prefixed' Implemented with the vendor prefix: -webkit- |
WebView Android Full support 43 Full support 43 Full support 2 Prefixed' Implemented with the vendor prefix: -webkit- |
Chrome Android Full support 43 Full support 43 Full support 18 Prefixed' Implemented with the vendor prefix: -webkit- |
Firefox Android Full support 16 Full support 16 Full support 49 Prefixed' Implemented with the vendor prefix: -webkit- Full support 44 Prefixed' Implemented with the vendor prefix: -webkit-
Disabled' From version 44: this feature is behind the Prefixed' Implemented with the vendor prefix: -moz- |
Opera Android Full support 30 Full support 30 Full support 14 Prefixed' Implemented with the vendor prefix: -webkit- No support 12.1 — 14 No support 12 — 14 Prefixed' Implemented with the vendor prefix: -o- |
Safari iOS Full support 9 Full support 9 Full support 4.2 Prefixed' Implemented with the vendor prefix: -webkit- |
Samsung Internet Android Full support 4.0 Full support 4.0 Full support 1.0 Prefixed' Implemented with the vendor prefix: -webkit- |
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
animation-duration by Mozilla Contributors is licensed under CC-BY-SA 2.5.