Transition utilities control how CSS properties change over time, creating smooth animations between states (like hover or focus).

Control which properties should transition:

• transition-none
• transition-all – All properties
• transition – Common properties (colors, opacity, shadow, transform)
• transition-colors – Only colors
• transition-opacity
• transition-shadow
• transition-transform

Control the length of the transition:

• duration-75 (75ms)
• duration-100
• duration-150 (default in Tailwind)
• duration-200
• duration-300
• duration-500
• duration-700
• duration-1000 (1s)

Control the ease/speed curve of the transition:

• ease-linear
• ease-in
• ease-out
• ease-in-out

Control the delay before a transition starts:

• delay-0
• delay-75
• delay-100
• delay-150
• delay-200
• delay-300
• delay-500
• delay-700
• delay-1000