Transition & Animation

Transition Duration

Utilities for controlling the duration of CSS transitions.

Basic usage

Changing transition duration

Use the duration-{amount} utilities to control an element's transition-duration.

duration-150

duration-300

duration-700

<button className="transition **duration-150** ease-in-out ...">Button A</button>
<button className="transition **duration-300** ease-in-out ...">Button B</button>
<button className="transition **duration-700** ease-in-out ...">Button C</button>