transition-delay
Sets wait time before transition begins. Typically in shorthand timing, used for individual delay control.
Class List
| Class | CSS | Description |
|---|---|---|
tdi | transition-delay: inherit | Inherits parent's transition-delay |
tdini | transition-delay: initial | Reset to initial (0s) |
tdr | transition-delay: revert | Revert to user agent default |
tdrl | transition-delay: revert-layer | Revert to previous cascade layer value |
tdun | transition-delay: unset | inherit if inheritable, otherwise initial |
Usage Examples
Use with shorthand transition classes for separate delay control.
<!-- Delay inheritance -->
<div class="tall200msease">
<span class="tdi hover-cFFFFFF">Inherits parent delay</span>
</div>
<!-- Delay reset -->
<div class="tall300msease">
<button class="tdini hover-bg6366F1">Instant transition without delay</button>
</div>Tips & Notes
Delay can be included in shorthand
Shorthand like tall200msease is usually sufficient. Specify delay separately only when needed.
Use for staggered animations
Different delays on multiple elements create staggered animation effects.