Part 45: CSS Transitions: Duration, Easing & Delay Utilities

Transitions create fluid, natural feedback when colors, sizes, or positions change.

1. The transition-* Utilities

• transition: Transitions common properties (color, background-color, border-color, transform, opacity, box-shadow).
• transition-colors: Transitions only color properties.
• transition-transform: Transitions only transform (scale, rotate, translate).
• transition-all: Transitions every CSS property (use with caution for performance).

2. Duration and Easing Curves

• Duration: duration-75, duration-150, duration-200, duration-300, duration-500, duration-1000.
• Timing functions:
• ease-in-out: Smooth acceleration and deceleration.
• ease-out: Fast start, gentle deceleration (ideal for enter animations).
• ease-in: Slow start, fast finish.
• ease-linear: Constant speed.

<button class="bg-blue-600 hover:bg-blue-700 transition duration-300 ease-in-out text-white font-bold py-2 px-6 rounded-lg">
  Smooth Transition
</button>

Key Takeaways

• Always specify duration-* when using transition.
• duration-200 or duration-300 with ease-in-out is standard for modern UI feedback.

In Part 46, we explore Transforms: Scale, Rotate, Translate & Skew!