Tailwind CSS
/Beginner
Duration & Delay
Definition
Utilities for controlling the length (duration) of a transition, and how long to wait before starting it (delay).
Explain Like I'm New
You added a transition, but it's too fast. `duration-500` tells the transition to take exactly half a second (500ms) to complete. `delay-200` tells it to wait 200ms before it even begins.
Real World Example
A massive dropdown menu. You don't want it to instantly vanish if the user's mouse accidentally slips off it for a millisecond. You add `delay-150` so it waits a moment before fading out.
Common Use Cases
- •Choreographing animations
- •Dropdowns
- •Tooltips
Interactive Example
Interview Questions
basic
- What is the default duration of a transition in Tailwind if you don't specify one?
intermediate
- What is an `ease` function (`ease-in`, `ease-out`) used for alongside duration?