Transitions and Timing Functions

1. Transition Utilities

Use transition classes to apply transitions. You can specify which properties should animate:

transition          /* Apply default transition */
transition-colors   /* Animate color changes */
transition-opacity  /* Animate opacity */
transition-transform/* Animate transform (scale, rotate, etc.) */
transition-all      /* Animate all properties */
            

Example:

<button class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded transition-colors">
    Hover Me
</button>
            

2. Duration Utilities

Control how long the transition takes using duration-{time}:

duration-75
duration-150
duration-300
duration-500
            

3. Easing / Timing Functions

Tailwind provides timing utilities for easing:

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

Example:

<div class="transition-opacity duration-500 ease-in-out hover:opacity-50">
    Hover to fade
</div>
            

4. Transition Delays

Add delays using delay-{time} classes:

delay-75
delay-150
delay-300
delay-500
            

5. Best Practices

• Use transitions to enhance UX, not just for visual effects.
• Keep duration short for interactive elements (150–300ms).
• Combine with hover, focus, and active states for responsiveness.

Conclusion

Tailwind's transition utilities make it simple to apply smooth effects and animations to your UI, boosting interactivity and polish with minimal code.