transition-delay

Summary

Defines when the transition will start. A value of ‘0s’ means the transition will execute as soon as the property is changed. Otherwise, the value specifies an offset from the moment the property is changed, and the transition will delay execution by that offset.

Overview table

Initial value: 0s
Applies to: all elements, :before and :after pseudo elements
Inherited: No
Media: interactive
Computed value: Same as specified value
Animatable: No
CSS Object Model Property: transitionDelay
Percentages: N/A

Syntax

transition-delay: time

Values

time: Floating-point number, followed by a time units designator (ms or s). For more information about the supported time units, see CSS Values and Units Reference.

Values are rounded up to the second decimal place. Each transition-delay is paired with a corresponding object property identified in the transition-property property. If more transition-delay values are declared than corresponding object properties identified in the transition-property property, the excess transition-delay values are ignored. If fewer transition-delay values are declared than corresponding object properties identified in the transition-property property, the list of transition-delay values is repeated from the beginning until the object properties are exhausted.

Examples

/*
 * This example shows a transition delay after hovering
 *  over a div for the specified delay time.
 *
 * In this example the background color will change
 * to red after hovering over a div for 3 seconds.
 */

div:hover{
    background-color: red;
    transition-delay: 3s;
}

View live example

Standards information

CSS Transitions Module Level 3, Section 2.4

Related specifications

CSS Transitions: W3C Working Draft

Attributions

Microsoft Developer Network: [Windows Internet Explorer API reference Article]