Motion
transition-delay
Setting a time to delay before starting transition.
Overview
| Class | Declarations |
|---|---|
transition-delay:<delay>,<milliSeconds>,<…> | transition-delay: <delay>,<milliSeconds>,<…>;
|
Examples
Delay a transition
Use transition-delay:* to wait before a transition starts. This is useful for staggered affordances and hover details that should not flash immediately.
<span class="opacity:0 transition:opacity|150ms|ease-out transition-delay:75ms opacity:1:hover"> More details</span>Generated CSS
@layer utilities { .transition-delay\:75ms { transition-delay: 75ms }}Stagger sibling elements
Apply different delays to related elements while keeping the same duration and easing.
<div class="transition-duration:200ms transition-property:opacity"> <span class="opacity:1 transition-delay:0ms">Step one</span> <span class="opacity:1 transition-delay:150ms">Step two</span></div>Use duration tokens
Define duration-* tokens when the same delay appears across several interactions.
@theme { --duration-short: 80ms;}<button class="transition:opacity|fast|smooth transition-delay:short">...</button>Reset delay at breakpoints
Remove a delay when the same UI becomes dense or task-focused at a larger viewport.
<div class="transition-delay:100ms transition-delay:0ms@sm"> Immediate on desktop</div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="transition-delay:75ms:hover transition-delay:0ms@print transition-delay:0ms@sm">...</div>