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