CSS Reference Property

transition-duration w3d

The transition-duration property is used to specify how long the transition animation should take. 1x1h1y

That is, it is used to determine the amount of time the transition from the old value to the new value should take.

The time is specified in seconds or milliseconds, and is initially set to ‘0s’, which means that the transition to the new value is immediate (i.e there will be no animation).

You can specify one duration or multiple comma-separated durations. When you provide a list of comma-separated property names, this list is usually mapped to a list of values provided by other transition-related properties, namely the transition-property properties. 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 transition-duration values, then the first value determines the duration of the transition of the first property in the list of property names provided by transition-property, and the second duration specifies the duration of the transition of the second property.

Official Syntax 55184y

Syntax:
```
transition-duration: <time> [, <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 transition-duration values:

transition-duration: 1s;
transition-duration: .3s;
transition-duration: .6s, 1.5s, 2s;
transition-duration: .3s, .6s, .9s;

The following specifies the transition duration of transitions applied to the color and background color of an element when it is hovered:

.element {
    color: black;
    background-color: white;
    transition-property: color, background-color;
    transition-duration: .6s, .9s;
    transition-timing-function: ease-in-out, ease-out;
}

.element:hover {
    color: white;
    background-color: black;
}

Live Demo 2x4j2k

Hover over the container in the following demo to see the elements transition their values over different time durations.

View this demo on the Codrops Playground

Browser k5t66

CSS3 Transitions 1j5b49

Simple method of animating certain properties of an element, with ability to define property, duration, delay and timing function.

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