The animation-duration property is used to specify how long the animation cycle should take.
The time is specified in seconds or milliseconds, and is initially set to ‘0s’, which means that the animation occurs instantaneously.
You can specify one duration or multiple comma-separated durations. When you provide a list of comma-separated durations, this list is usually mapped to a list of values provided by other animation-related properties, such as the animation-delay, animation-timing-function, and animation-name properties, among others. Each list of values in these properties is treated kind of like an array, where each value in a list of values has its own index. Then, each value in a list of values is mapped to its corresponding value with the same index in the list provided in the other properties.
For example, if you provide two animation-duration values, then the first value determines the duration of the animation of the first animation in the list of animation names provided by animation-name, and the second duration specifies the duration of the second animation.
If the animation-duration value is ‘0s’, like the initial value, the keyframes of the animation have no effect, but the animation itself still occurs instantaneously. That is, animation-fill-mode applies as normal, filling backwards or forwards as appropriate, and animation events still fire.
Official Syntax
Values
- <time>
-
A
<time>value which specifies specifies the length of time that an animation takes to complete one cycle. A value of ‘0s’ is the default value, and it means that the animation effect occurs instantaneously and thus the keyframes have no effect. A negative value is not allowed and renders the declaration invalid. See the<time>entry for a list of possible values.
Examples
The following are all valid animation-duration values:
animation-duration: 1s;
animation-duration: .3s;
animation-duration: .6s, 1.5s, 2s;
animation-duration: .3s, .6s, .9s;
The following specifies the animation duration of two animations applied to an element:
.element {
animation-name: rotate, fall;
animation-duration: .6s, .9s;
animation-timing-function: ease-in-out, ease-out;
}
@keyframes rotate {
/* keyframes defining the rotate animation */
}
@keyframes fall {
/* keyframes defining the fall animation */
}
Live Demo
Hover over the container in the following demo to see the elements animate their values over different time durations.
View this demo on the Codrops PlaygroundBrowser Support
CSS Animation
Complex method of animating certain properties of an element
W3C Working Draft
Supported from the following versions:
Desktop
- 43
- 16
- 10
- 12
- 9
Mobile / Tablet
- 9.0
- 130
- No
- 130
- 130
