Elements logo

Transition delay

Utilities for controlling the delay of CSS transitions

Class reference

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

Usage

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

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

Responsive

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

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