CSS Reference Property

transition-duration 141d49

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

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 3xs5l

Syntax:
```
transition-duration: <time> [, <time>]*
```
Initial: 0s
Applies To: all elements; and ::after pseudo-elements
Animatable: no

Values u704t

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

Examples 2h2053

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 6b4m17

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 572e63

CSS3 Transitions 1n6c1i

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 ea5q

Mobile / Tablet 6s2f12

* denotes prefix required.

ed:
Yes
No
Partially
Polyfill

Stats from caniuse.com

Referencia de CSS3 553b52