CSS Transitions vs Animations: When to Use Each

Both transition and animation can move elements, causing confusion about which to use for a given effect.

Use transition for state-driven changes (hover, focus, class toggle) where the start state is the current CSS value. Use animation for autonomous, multi-step, or repeating motion that does not require an external trigger.

/* Transition: reacts to :hover state change */
.button {
  background: blue;
  transition: background 0.2s ease, transform 0.15s ease;
}
.button:hover {
  background: darkblue;
  transform: scale(1.03);
}

/* Animation: runs automatically, multi-step */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.4); }
  50% { box-shadow: 0 0 0 10px rgba(99,102,241,0); }
}
.badge {
  animation: pulse 2s ease infinite;
}

Transitions are interpolations between two states managed by CSS. Animations define their own keyframes and run independently of element state — they have richer control over timing and repetition but require explicit declaration of all steps.