CSS Reference Property

animation-duration 565v3e

The animation-duration property is used to specify how long the animation cycle should take. 165056

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-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 animation-fill-mode applies as normal, filling backwards or forwards as appropriate, and animation events still fire.

Official Syntax 55184y

Syntax:
```
animation-duration: <time>#
```
Initial: 0s
Applies To: all elements; and ::after pseudo-elements
Animatable: no

Values 584j31

<time>: A <time> entry for a list of possible values.

Examples 3e5p5z

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 2x4j2k

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 Playground

Browser k5t66

CSS Animation 4x1j4h

Complex method of animating certain properties of an element

W3C Working Draft

ed from the following versions:

Desktop 3n671n

Mobile / Tablet 4q224p

* denotes prefix required.

ed:
Yes
No
Partially
Polyfill

Stats from caniuse.com

Referencia de CSS3 325u2m