CSS Reference Property

transition-delay

The transition-delay property is used to specify the amount of time to wait before a transition effect is animated.

It allows a transition effect to start after some amount of time from when it is applied. A value of ‘0s’ means that the transition will start as soon as the property that is being transitioned is changed. A value other than zero, specifies an offset from the moment the property is changed, and the transition will delay execution by that offset.

For example, suppose you want to change the value of the background color of an element when it is hovered. Using a transition effect, your CSS might look something like this:

.element {
    background-color: maroon;
    transition-property: background-color;
    transition-duration: .6s;
    transition-timing-function: linear;
}

/* change the property when the element is hovered */
.element:hover {
    background-color: navy;
}
                

Without specifying a transition delay, the transition animation will start as soon as the element is hovered. Using transition-delay, you can literally delay the transition animation by an amount of time of your choice.

.element {
    /* ... */
    transition-delay: 1s; /* wait one second before starting the transition animation */
}
                

The time offset specified using transition-delay will offset the transition animation by the amount specified. This offset can also be a negative value.

If the value for transition-delay is a negative time offset then the transition will execute the moment the property is changed, but will appear to have begun execution at the specified offset. That is, the transition will appear to begin part-way through its play cycle.

You can specify one transition delay value or multiple comma-separated values. 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-duration, 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-delay values, then the first value determines the transition delay for the first property in the list of property names provided by transition-property, and the second transition delay specifies the delay of the transition of the second property.

The transition-delay property is useful when you’re chaining transitions, and you want one transition to occur after another one has finished, or even after a certain amount of time of the start of the other transition.

Official Syntax

  • Syntax:

    transition-delay: <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 offset from the moment the property is changed by which the transition will delay execution. See the <time> entry for a list of values.

The time offset can be negative. If it is a negative time offset then the transition will execute the moment the property is changed, but will appear to have begun execution at the specified offset.

Examples

The following will delay the transition of the background color till after the transition of the position. This is done by specifying a transition-delay value for the transition of the background-color property that is equal to the transition-duration value of the position transition. The transition animations will take place when the element is hovered.

.element {
    background-color: purple;
    position: relative;
    left: 0;
    transition-property: left, background-color;
    transition-duration: .4s, .4s;
    transition-timing-function: ease, ease-out;
    transition-delay: 0s, .4s; 
    /* start the position transition immediately when the 
    property is changed (on hover) and wait till its transition 
    duration is over before you start the background-color 
    transition. */
}

.element:hover {
    left: 400px;
    background-color: #009966;
}
                

Live Demo

Hover over the containers in this demo to see the elements transition after certain time offsets. The background color change also occurs after the position transition ends, using the same transition delay technique mentioned in the Examples section above. Try changing the transition-delay values to see how that changes the animation transitions.

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

  • 26
  • 16
  • 10
  • 12
  • 6.1

Mobile / Tablet

  • 7.0
  • 4.4
  • No
  • 61
  • 56

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Further Reading

Written by

Last updated December 11, 2016 at 10:53 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.