The animation-duration
CSS property sets the length of time that an animation takes to complete one cycle.
animation-duration
Try it
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; /* Global values */ animation-duration: inherit; animation-duration: initial; animation-duration: revert; animation-duration: revert-layer; animation-duration: unset;
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
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); } }
Result
See CSS animations for more examples.
Specifications
Specification |
---|
CSS Animations Level 2 # animation-duration |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
animation-duration |
43
3
|
12
12
|
49
16
5
|
10
Once the element has loaded, changing the value of this property has no effect.
|
30
15
12.1-15
12-15
|
9
4
|
43
2
|
43
18
|
49
16
5
|
30
14
12.1-14
12-14
|
9
4.2
|
4.0
1.0
|
See also
- Using CSS animations
- JavaScript
AnimationEvent
API
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration