Transition duration

Utilities for controlling the duration of CSS transitions


Class reference

ClassProperties
duration-0transition-duration: 0ms
duration-50transition-duration: 50ms
duration-75transition-duration: 75ms
duration-100transition-duration: 100ms
duration-150transition-duration: 150ms
duration-200transition-duration: 200ms
duration-300transition-duration: 300ms
duration-400transition-duration: 400ms
duration-500transition-duration: 500ms
duration-600transition-duration: 600ms
duration-700transition-duration: 700ms
duration-800transition-duration: 800ms
duration-900transition-duration: 900ms
duration-1000transition-duration: 1000ms
duration-1500transition-duration: 1500ms
duration-2000transition-duration: 2000ms
duration-2500transition-duration: 2500ms
duration-3000transition-duration: 3000ms
duration-DEFAULTtransition-duration: 150ms

# 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.