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.