This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

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

Related specifications

CSS Transitions
W3C Working Draft

See also

Related articles

Transitions

Attributions