Transition Duration Delay in TailwindCSS
? Transition, Duration, and Delay in Tailwind CSS
Tailwind provides utilities to easily add CSS transitions and control their duration and delay for smooth state changes like hover, focus, or active.
1. Transition Utilities
| Class | CSS Equivalent | Description |
|---|---|---|
transition | transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform; | Enables common transitions on multiple properties (default) |
transition-none | transition: none; | Disables transitions |
transition-all | transition-property: all; | Transitions all properties |
transition-colors | transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; | Transitions color-related properties |
transition-opacity | transition-property: opacity; | Transitions opacity only |
transition-shadow | transition-property: box-shadow; | Transitions box-shadow only |
transition-transform | transition-property: transform; | Transitions transform only |
2. Duration Utilities (duration-{time})
Controls how long the transition lasts.
| Class | CSS Equivalent | Description |
|---|---|---|
duration-75 | transition-duration: 75ms; | Very fast transition |
duration-100 | transition-duration: 100ms; | Fast |
duration-150 | transition-duration: 150ms; | Slightly slower |
duration-200 | transition-duration: 200ms; | Medium |
duration-300 | transition-duration: 300ms; | Common smooth speed |
duration-500 | transition-duration: 500ms; | Slow |
duration-700 | transition-duration: 700ms; | Slower |
duration-1000 | transition-duration: 1000ms; | Very slow |
3. Delay Utilities (delay-{time})
Sets how long to wait before the transition starts.
| Class | CSS Equivalent | Description |
|---|---|---|
delay-75 | transition-delay: 75ms; | Very short delay |
delay-100 | transition-delay: 100ms; | Short delay |
delay-150 | transition-delay: 150ms; | Slightly longer delay |
delay-200 | transition-delay: 200ms; | Medium delay |
delay-300 | transition-delay: 300ms; | Longer delay |
delay-500 | transition-delay: 500ms; | Half a second delay |
delay-700 | transition-delay: 700ms; | Longer delay |
delay-1000 | transition-delay: 1000ms; | One second delay |
Example: Smooth Color Change on Hover with Duration and Delay
<button class="bg-blue-500 hover:bg-blue-700 transition-colors duration-300 delay-100 text-white px-4 py-2 rounded"> Hover me smoothly</button>transition-colors: Transitions background color and other color propertiesduration-300: Transition lasts 300msdelay-100: Transition starts after 100ms delay
Example: Scale and Shadow Transition
<div class="transform hover:scale-105 hover:shadow-lg transition-transform transition-shadow duration-500 delay-150 p-6 bg-white rounded"> Hover me to scale and add shadow</div>Transitions both scale and shadow smoothly over 500ms after 150ms delay
Want me to help you with combining these with other utilities like ease functions or different transition properties?
