CSS3 transition-delay Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The transition-delay CSS property defines when the transition will start (e.g. a value of 2s, indicates that the transition will begin 2 seconds after it is applied.). The value of this property can be specified in seconds (s) or milliseconds (ms).
The following table summarizes the usages context and the version history of this property.
| Default value: | 0s |
|---|---|
| Applies to: | All elements, ::before and ::after pseudo-elements |
| Inherited: | No |
| Animatable: | No. See animatable properties. |
| Version: | New in CSS3 |
Syntax
The syntax of the property is given with:
The example below shows the transition-delay property in action.
Example
Try this code »button {
background: #fd7c2a;
/* For Safari 3.0+ */
-webkit-transition-property: background;
-webkit-transition-duration: 4s;
-webkit-transition-delay: 2s;
/* Standard syntax */
transition-property: background;
transition-duration: 4s;
transition-delay: 2s;
}
button:hover {
background: #3cc16e;
}Note: Negative values are allowed for this property. However, it will appear to have begun executing partway through its transition cycle e.g. the transition delay of -2s makes the transition start at once, but starts 2 seconds into the transition.
Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
| time | Defines the number of seconds (s) or milliseconds (ms) to wait before the transition will start. The default value is 0s. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element transition-delay property. |
Browser Compatibility
The transition-delay property is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: CSS3 Transitions.
Related properties: transition, transition-duration, transition-property, transition-timing-function.
