Definition and Usage
The transition-delay CSS property specifies the amount of time to wait between a change being requested to a property that is to be transitioned and the start of the transition effect.
A value of 0s, or 0ms, indicates that the property will begin to animate its transition immediately when the value changes; positive values will delay the start of the transition effect for the corresponding number of seconds. Negative values cause the transition to begin immediately, but to cause the transition to seem to begin partway through the animation effect.
You may specify multiple delays; each delay will be applied to the corresponding property as specified by the transition-property property, which acts as a master list. If there are fewer delays specified than in the master list, missing values are set to the initial value (0s). If there are more delays, the list is simply truncated to the right size. In both case the CSS declaration stays valid.
- Initial 0s
- Applies to all elements, ::before and ::after pseudo-element
- Inherited no
- Media interactive
- Computed Value as specified
- Animatable no
- Canonical order the unique non-ambiguous order defined by the formal grammar
Syntax
Formal syntax: <time>#
transition-delay: 3s transition-delay: 2s, 4ms transition-delay: initial
Values
- <time>
- Is a <time> denoting the amount of time to wait between a property's value changing and the start of the animation effect.
Examples
No examples
Compatibility
Desktop browsers
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 -webkit | 4.0 (2.0) -moz 16.0 (16.0) | 10.0 | 11.6 -o 12.10 | 3.0 -webkit |
Mobile browsers
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 2.1 -webkit | 4.0 (2.0) -moz 16.0 (16.0) | NA | 10.0 -o 12.10 | 3.2 -webkit |