transition-delay
Sets wait time before transition begins. Typically in shorthand timing, used for individual delay control.
Class List
| Class | CSS | Description |
|---|---|---|
tde200ms | transition-delay: 200ms | Set delay time (primary form). ms or s |
tde0-5s | transition-delay: 0.5s | Decimals use a hyphen (0-5s = 0.5s) |
tde100ms_200ms | transition-delay: 100ms, 200ms | Separate multiple values with underscore |
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 |
Visual Diagram
The horizontal axis is time. The grey run is the wait where nothing happens, the blue run is the 300ms in which the value actually changes. It shows at a glance that a delay does not slow the animation down, it only pushes the start back.
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>Class Details
tde200mstransition-delay: 200ms
The primary form, stating the delay directly. The number and unit in the class name become the value, and both milliseconds and seconds work. Use it to make a tooltip wait a beat, or to give a menu a moment before it closes.
<!-- Tooltip that waits until the pointer has settled -->
<div class="pr dib">
<button class="bg1E1E2E b1pxsolid27272A br6px py12px px16px fs14px cFAFAFA">
Usage
</button>
<span class="tde200ms tall200msease o0 hover-o100
pa t0 l0 bg18181B b1pxsolid27272A br6px p12px fs13px cA1A1AA">
Counted per calendar month.
</span>
</div>tde0-5stransition-delay: 0.5s
Fractional values are written with a hyphen because a class name cannot contain a dot. Read the hyphen back as a decimal point.
<!-- Half a second, written with a hyphen for the decimal point -->
<div class="tde0-5s tall300msease o0 hover-o100">
Appears half a second after the state changes.
</div>tde100ms_200mstransition-delay: 100ms, 200ms
Gives each targeted property its own delay. The underscore is the list separator and the order pairs up with the order of the target properties. Use it when color should start at once and movement a moment later.
<!-- Color starts at 100ms, transform at 200ms -->
<button class="tpcolor_transform tde100ms_200ms tall300msease
cA1A1AA hover-cFFFFFF hover-ts1-05">
Staggered within a single element
</button>tditdinitdrtdrltdunGlobal keywords
Values that inherit the parent, reset to the initial value or fall back to a previous layer. They are mostly used to switch off a delay that a shared component set, in one specific place.
<!-- Shared component sets a delay, one instance opts out -->
<nav class="tde200ms">
<a class="tdini tall200msease cA1A1AA hover-cFFFFFF tdn">
This link reacts immediately
</a>
</nav>Practical Example — Menu Reveal and Tooltip
The tooltip waits until the pointer has genuinely settled, while the submenu delays only its close so the pointer can travel diagonally.
<!-- Submenu: opens at once, closes late so the pointer can travel -->
<li class="pr">
<a class="fs14px cFAFAFA tdn">Products</a>
<ul class="tde200ms tall200msease o0 hover-o100
pa t0 l0 bg18181B b1pxsolid27272A br8px p16px">
<li class="fs14px c71717A py6px">Platform</li>
<li class="fs14px c71717A py6px">Integrations</li>
<li class="fs14px c71717A py6px">Pricing</li>
</ul>
</li>
<!-- Tooltip: same idea, longer wait, because it is purely informational -->
<span class="tde0-5s tall200msease o0 hover-o100
fs13px cA1A1AA">
Shown only if you really stop here.
</span>Tips / Caveats
It applies on both enter and leave
A delay applies in every direction of the state change. To wait on hover but disappear instantly on leave, set different delay values on the base state and the hover state.
It is not a way to slow an animation down
A delay only postpones the start. If the movement feels sluggish, adjust the duration instead; a longer delay just makes the interface feel unresponsive.
A long delay reads as a bug
Keep delays near zero for responses to clicks and typing. Users perceive anything beyond about a tenth of a second as no response at all, so save delays for places where waiting is intentional, such as hover tooltips.
Too few values are cycled
With three target properties and two delays, the first value comes around again for the third property. When the order looks wrong, start by matching the counts.
Staggering needs a different value per element
A list that appears one item at a time is built by increasing the delay slightly for each item. When the item count varies, compute the value in code rather than hand-writing a class per item.
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.