Transition duration

Class reference

# Usage

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

<button class="transition duration-150 ease-in-out ...">Hover me</button>
<button class="transition duration-300 ease-in-out ...">Hover me</button>
<button class="transition duration-700 ease-in-out ...">Hover me</button>

# Responsive

To control an element’s transition-duration at a specific breakpoint, add a {screen}: prefix to any existing transition-duration utility. For example, use md:duration-500 to apply the duration-500 utility at only medium screen sizes and above.

For more information about Elements’ responsive design features, check out the Responsive Design documentation.