transition vs animation: when to use each

Two flavors of CSS motion

/* TRANSITION — interpolate between two states */
.button {
  background: #3B82F6;
  transition: background 0.15s ease;
}
.button:hover { background: #2563EB; }

/* ANIMATION — multi-keyframe sequence, can loop */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.heart { animation: pulse 1.5s infinite; }

When transition wins

Two states: A → B → A. Triggered by user action OR class change.

• Hover effects (color, transform, shadow).
• Tab switching (slide content in/out).
• Modal open/close (opacity, transform).
• Focus rings (outline appears smoothly).

ONE property changes, ONE direction at a time. Reverses automatically when the trigger is removed.

When animation wins

Multi-step or LOOPING motion.

• Loading spinners (continuous rotation).
• Page-load entrance (fade + slide).
• Attention-pull (pulse, shake).
• Multi-stage sequences.

@keyframes declares the timeline; animation: name duration timing iteration applies it.

Don't reach for animation when transition fits

Transition is simpler, more testable, and respects :hover / :focus natively. Use animation only when you need keyframes or looping.