Contents
Quick reference
| Class | Properties |
|---|---|
.delay-0 | transition-delay: 0s; |
.delay-75 | transition-delay: 75ms; |
.delay-100 | transition-delay: 100ms; |
.delay-150 | transition-delay: 150ms; |
.delay-200 | transition-delay: 200ms; |
.delay-300 | transition-delay: 300ms; |
.delay-500 | transition-delay: 500ms; |
.delay-700 | transition-delay: 700ms; |
.delay-1000 | transition-delay: 1000ms; |
Basic usage
Delaying transitions
Use the delay-{amount} utilities to control an element’s transition-delay.
Hover each button to see the expected behaviour
delay-150
delay-300
delay-700
<button class="transition delay-150 duration-300 ease-in-out ...">Button A</button>
<button class="transition delay-300 duration-300 ease-in-out ...">Button B</button>
<button class="transition delay-700 duration-300 ease-in-out ...">Button C</button>
Edit this page on Github
Last updated on April 6, 2024