Motion
transition-duration
Setting how long a CSS property transition takes.
Overview
| Class | Declarations |
|---|---|
transition-duration-fastest | transition-duration: var(--duration-fastest);
|
transition-duration-faster | transition-duration: var(--duration-faster);
|
transition-duration-fast | transition-duration: var(--duration-fast);
|
transition-duration-normal | transition-duration: var(--duration-normal);
|
transition-duration-slow | transition-duration: var(--duration-slow);
|
transition-duration-slower | transition-duration: var(--duration-slower);
|
transition-duration-slowest | transition-duration: var(--duration-slowest);
|
transition-duration:<duration>,<…> | transition-duration: <duration>,<…>;
|
Examples
Set transition speed
Toggle each layer to compare the same 96px movement over 150ms and 500ms. The distance and linear easing remain identical.
Set transition speed
The control, travel distance and easing stay explicit. Duration is the interpolation interval, independent of any start delay.
<!-- Fast · 150ms --><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-duration:0ms@print transition-duration-fast@screen@motion"> Layer 01 </span> </span></label><!-- Slower · 500ms --><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-duration:0ms@print transition-duration-slower@screen@motion"> Layer 01 </span> </span></label>Generated CSS
@layer theme { :root, :host { --duration-fast: .15s; --duration-slower: .5s }}@layer utilities { .transition-duration-fast { transition-duration: var(--duration-fast) } .transition-duration-slower { transition-duration: var(--duration-slower) }}Duration controls the interpolation interval after any delay. Use a duration token or an explicit nonnegative CSS time such as 150ms or .5s. The initial duration is zero.
Match duration to distance
Compare a 48px move over 300ms with a 96px move over 600ms. Linear timing gives both examples the same average travel rate.
Match duration to distance
The control, travel distance and easing stay explicit. Duration is the interpolation interval, independent of any start delay.
<!-- 48px / 300ms · 160px per second --><label class="block w:280px max-w:100% font-sm transform:translateX(48px):has(input:checked)>span>span@screen"> <input type="checkbox" aria-label="Move short distance" class="mr-xs accent-color-blue outline:2px|solid|var(--color-blue):focus-visible outline-offset:3px:focus-visible"> Move short distance <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-duration:0ms@print transition-duration-slow@screen@motion"> Layer 01 </span> </span></label><!-- 96px / 600ms · 160px per second --><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 long distance" class="mr-xs accent-color-blue outline:2px|solid|var(--color-blue):focus-visible outline-offset:3px:focus-visible"> Move long distance <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-duration:0ms@print transition-duration:600ms@screen@motion"> Layer 01 </span> </span></label>This measured comparison illustrates distance divided by time. Product timing still depends on the interaction; an easing curve changes the instantaneous speed even when the average rate is unchanged.
Remove motion for static contexts
Toggle both specimens. One uses 500ms and the other uses zero, so the same endpoint can be reached through interpolation or an immediate update.
Remove motion for static contexts
The control, travel distance and easing stay explicit. Duration is the interpolation interval, independent of any start delay.
<!-- 500ms · native transition --><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-duration:0ms@print transition-duration-slower@screen@motion"> Layer 01 </span> </span></label><!-- 0ms · immediate update --><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-duration:0ms transition-property:transform transition-timing-function:linear"> Layer 01 </span> </span></label>A zero duration removes interpolation. Reset a positive delay too when the whole update must be immediate. These examples have no delay; reduced motion and print use zero duration.
Apply conditionally
Resize before toggling the layer. Its duration changes from 150ms to 500ms at sm, while the 96px distance and linear timing stay fixed.
Apply conditionally
The control, travel distance and easing stay explicit. Duration is the interpolation interval, independent of any start delay.
<!-- 150ms → 500ms 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-property:transform transition-timing-function:linear transition-duration:0ms@print transition-duration-fast@screen@motion transition-duration-slower@screen@motion@sm"> Layer 01 </span> </span></label>The readout follows the actual viewport rule. Reduced motion and print use zero duration; changing screen width does not replace the authored endpoint.