transition-duration

Setting the length of time a transition should takes to complete.

Overview

Examples

Set transition speed

Use transition-duration:* to control how long a property takes to move from one value to another.

<button class="bg:blue-60 transition-duration:150ms transition-property:background-color bg:blue-70:hover">  Quick change</button>

@layer utilities {  .transition-duration\:150ms {    transition-duration: 150ms  }}

Match duration to distance

Short hover feedback usually feels best under a few hundred milliseconds. Larger position or panel changes can use a longer duration.

<aside class="transform:translateX(0) transition-duration:300ms transition-property:transform">  Panel</aside>

Remove motion for static contexts

Use transition-duration:0ms when a state should update immediately, such as print output or a compact fallback.

<button class="transition-duration:150ms transition-duration:0ms@print">  Print without motion</button>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="transition-duration:150ms:hover transition-duration:0ms@print transition-duration:300ms@sm">...</div>