The animation-duration
CSS property sets the length of time that an animation takes to complete one cycle.
The animation-duration
CSS property sets the length of time that an animation takes to complete one cycle.
It is often convenient to use the shorthand property animation
to set all animation properties at once.
/* 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;
<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 of 0s
, 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 are applied to the animations in the order in which the animation-name
s appear. For situations where the number of animations and animation-*
property values do not match, see Setting multiple animation property values.
Initial value | 0s |
---|---|
Applies to | all elements, ::before and ::after pseudo-elements
|
Inherited | no |
Computed value | as specified |
Animation type | Not animatable |
animation-duration =
<time [0s,∞]>#
This animation has an animation-duration of 0.7 seconds.
<div class="box"></div>
.box { background-color: rebeccapurple; border-radius: 10px; width: 100px; height: 100px; } .box:hover { animation-name: rotate; animation-duration: 0.7s; } @keyframes rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
Hover over the rectangle to start the animation.
See CSS animations for more examples.
Specification |
---|
CSS Animations Level 2 # animation-duration |
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
|
AnimationEvent
API
© 2005–2022 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