transition-delay
Setting when a CSS property transition starts.
Overview
| Class | Declarations |
|---|---|
transition-delay:<time>,<…> | transition-delay: <time>,<…>;
|
Examples
Delay a transition
Toggle each layer to compare an immediate start with a 300ms wait. Both movements then take 800ms, making the waiting interval distinct from the duration.
<!-- No delay · begin immediately --><label class="block w:280px max-w:100% font-sm transform:translateX(96px):has(input:checked)>span>span@screen"> <input type="checkbox" aria-label="Move layer" class="mr-xs accent-color-blue outline:2px|solid|var(--color-blue):focus-visible outline-offset:3px:focus-visible"> Move layer <span aria-hidden="true" class="block h:64px mt-md p-xs outline:1px|dashed|var(--color-line-muted)"> <span id="target" class="grid place-items:center h:48px w:128px b:1px|solid|var(--color-blue-60) r-sm font-sm bg-blue-10 fg-blue-80 opacity:1 transform:none transition-delay:0ms transition-property:transform transition-timing-function:linear transition:none@print transition-duration-slowest@screen@motion"> Layer 01 </span> </span></label><!-- 300ms delay · wait, then move --><label class="block w:280px max-w:100% font-sm transform:translateX(96px):has(input:checked)>span>span@screen"> <input type="checkbox" aria-label="Move layer" class="mr-xs accent-color-blue outline:2px|solid|var(--color-blue):focus-visible outline-offset:3px:focus-visible"> Move layer <span aria-hidden="true" class="block h:64px mt-md p-xs outline:1px|dashed|var(--color-line-muted)"> <span id="target" class="grid place-items:center h:48px w:128px b:1px|solid|var(--color-blue-60) r-sm font-sm bg-blue-10 fg-blue-80 opacity:1 transform:none transition-property:transform transition-timing-function:linear transition:none@print transition-delay-slow@screen@motion transition-duration-slowest@screen@motion"> Layer 01 </span> </span></label>Generated CSS
@layer theme { :root, :host { --duration-slow: .3s }}@layer utilities { .transition-delay-slow { transition-delay: var(--duration-slow) }}The visible checkbox remains usable while its layer waits. A positive delay waits; a negative delay starts partway through the transition. Motion-gated duration and delay both return to zero for reduced motion.
Stagger sibling elements
One checkbox changes both siblings. Each child owns its transition; the violet child waits 300ms while the blue child starts immediately.
<!-- One native trigger · two independent timelines --><label class="block w:280px max-w:100% font-sm transform:translateX(96px):has(input:checked)>span>span@screen"> <input type="checkbox" aria-label="Move both layers" class="mr-xs accent-color-blue outline:2px|solid|var(--color-blue):focus-visible outline-offset:3px:focus-visible"> Move both layers <span aria-hidden="true" class="block mt-md p-xs outline:1px|dashed|var(--color-line-muted)"> <span id="first" class="grid place-items:center h:48px w:128px b:1px|solid|var(--color-blue-60) r-sm bg-blue-10 fg-blue-80 transform:none transition:none@print transition:transform|var(--duration-slowest)|linear@screen@motion"> First · no delay </span> <span id="target" class="grid place-items:center h:48px w:128px mt-sm b:1px|solid|var(--color-violet-60) r-sm bg-violet-10 fg-violet-80 transform:none transition:none@print transition:transform|var(--duration-slowest)|linear@screen@motion transition-delay-slow@screen@motion"> Second · 300ms </span> </span></label>Transition properties are not inherited. Defining duration on the parent would not provide a transition for these children. The shared selector changes their transforms together; each child’s own delay sets its start time.
Use duration tokens
Define a named duration when a delay is shared across related interactions. This local short token delays the visible layer by 80ms.
@theme { --duration-short: 80ms;}<!-- Local duration token · 80ms delay --><label class="block w:280px max-w:100% font-sm transform:translateX(96px):has(input:checked)>span>span@screen"> <input type="checkbox" aria-label="Move layer" class="mr-xs accent-color-blue outline:2px|solid|var(--color-blue):focus-visible outline-offset:3px:focus-visible"> Move layer <span aria-hidden="true" class="block h:64px mt-md p-xs outline:1px|dashed|var(--color-line-muted)"> <span id="target" class="grid place-items:center h:48px w:128px b:1px|solid|var(--color-blue-60) r-sm font-sm bg-blue-10 fg-blue-80 opacity:1 transform:none transition:none@print transition:transform|var(--duration-slower)|var(--easing-smooth)@screen@motion transition-delay-short@screen@motion"> Layer 01 </span> </span></label>The custom token belongs to this example’s theme. Duration and easing tokens resolve in their respective positions; the readout reports the browser’s resolved 80ms delay.
Reset delay at breakpoints
Below sm, the layer waits 300ms before moving. Widen the real viewport to remove that wait, then toggle the checkbox again.
<!-- 300ms → no delay at sm --><label class="block w:280px max-w:100% font-sm transform:translateX(96px):has(input:checked)>span>span@screen"> <input type="checkbox" aria-label="Move layer" class="mr-xs accent-color-blue outline:2px|solid|var(--color-blue):focus-visible outline-offset:3px:focus-visible"> Move layer <span aria-hidden="true" class="block h:64px mt-md p-xs outline:1px|dashed|var(--color-line-muted)"> <span id="target" class="grid place-items:center h:48px w:128px b:1px|solid|var(--color-blue-60) r-sm font-sm bg-blue-10 fg-blue-80 opacity:1 transform:none transition:none@print transition:transform|var(--duration-slowest)|linear@screen@motion transition-delay-slow@screen@motion transition-delay:0ms@screen@sm"> Layer 01 </span> </span></label>Only the delay changes at the breakpoint. The motion-gated 800ms duration and 96px endpoint remain the same. Choose responsive delays from actual interaction needs, not screen size alone.
Apply conditionally
Delay only the outward change. Check the box to wait 300ms before moving; uncheck it to return without that delay.
<!-- Checked · wait outward, return immediately --><label class="block w:280px max-w:100% font-sm transform:translateX(96px):has(input:checked)>span>span@screen transition-delay-slow:has(input:checked)>span>span@screen@motion"> <input type="checkbox" aria-label="Move layer" class="mr-xs accent-color-blue outline:2px|solid|var(--color-blue):focus-visible outline-offset:3px:focus-visible"> Move layer <span aria-hidden="true" class="block h:64px mt-md p-xs outline:1px|dashed|var(--color-line-muted)"> <span id="target" class="grid place-items:center h:48px w:128px b:1px|solid|var(--color-blue-60) r-sm font-sm bg-blue-10 fg-blue-80 opacity:1 transform:none transition-delay:0ms transition:none@print transition:transform|var(--duration-slowest)|linear@screen@motion"> Layer 01 </span> </span></label>The checked-state rule selects the delay for the new state. Wait for the outward move to finish before comparing the full return. Reduced motion removes duration and delay; print uses no transition.