transition

Definition

The transition CSS property creates smooth animations between different states of an element. It defines how CSS properties change over time, specifying duration, timing function, delay, and which properties to animate. Transitions provide a way to create polished, professional-looking animations that enhance user experience.

Syntax

.button {
  transition: transform 200ms ease, box-shadow 200ms ease;
}

Values

<property> <duration> <timing-function> <delay> (comma-separated for multiples).
all to transition every animatable property.
none to disable transitions.

Practical Examples

.button {
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -20px rgba(15, 23, 42, 0.35);
}

Transition shorthands make hover/focus states feel polished.

HTML

Code

<div class="flex gap-4">
  <button class="rounded-full bg-slate-900 px-5 py-2 text-sm font-semibold text-white transition duration-200">Tailwind transition</button>
  <button class="rounded-full bg-sky-500 px-5 py-2 text-sm font-semibold text-white" style="transition: transform 200ms ease, box-shadow 200ms ease;">Custom transition</button>
</div>

Tips & Best Practices

Transition only the properties you need to avoid performance issues.
Prefer GPU-friendly properties (transform, opacity).

Accessibility & UX Notes

Keep transitions short; long delays can slow users down.

Browser Support

Supported in modern browsers (IE10+ with vendor prefixes).

transition-property, transition-duration, transition-timing-function, transition-delay.
animation for keyframe-based effects.