CSS Reference Property

transition-duration

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

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-delay, transition-timing-function, and 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

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

Values

<time>: A <time> value which specifies the amount of time for the transition to occur from the old value to the new value. A value of ‘0s’ is the default value, and it means that the transition effect is immediate and no animation occurs. 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 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

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 Support

CSS3 Transitions

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

W3C Working Draft

Supported from the following versions:

Desktop

Mobile / Tablet

* denotes prefix required.

Supported:
Yes
No
Partially
Polyfill

Stats from caniuse.com