Motion

transition-duration

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

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:slow`	`transition-duration: var(--duration-slow);`
`transition-duration:slower`	`transition-duration: var(--duration-slower);`
`transition-duration:slowest`	`transition-duration: var(--duration-slowest);`
`transition-duration:<milliSeconds>,<…>`	`transition-duration: <milliSeconds>,<…>;`

Examples

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

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

Generated CSS

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

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

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

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 styles based on different states using selectors and conditional queries.

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

Setting a time to delay before starting transition.

Setting the CSS properties to which a transition effect should be applied.