CSS transition or animation: choose by the state change

Use a CSS transition when a property changes between states. Use keyframe animation when you need a defined sequence that is not simply one state becoming another. Choose from the interaction rather than adding keyframes because they look more expressive.

A state change fits a transition

A button becoming pressed, a panel changing size, or a card moving on hover can be expressed through state. A transition interpolates the property when that state changes. Keep the state itself in your component or CSS; the animation should not be the only record of what happened.

.toggle { transition: background-color 160ms ease-out; }
.toggle[aria-pressed="true"] { background-color: #213db8; }
@media (prefers-reduced-motion: reduce) {
  .toggle { transition: none; }
}

Use a real button with an accurate aria-pressed value when the control is a toggle. Check text contrast in both colors. The snippet illustrates the styling choice, not a complete control.

A sequence fits keyframes

A short confirmation emphasis can use keyframes, provided the confirmation also appears as text or state. Avoid looping a success effect indefinitely.

@keyframes confirm {
  from { outline-offset: 1px; }
  to { outline-offset: 4px; }
}
.confirmed { animation: confirm 160ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .confirmed { animation: none; }
}

This example is deliberately small. It does not justify using expensive or distracting properties in your application without testing.

Check what happens when the state reverses

A transition interrupted halfway should still settle into the current state. A keyframe sequence may need cancellation or removal when the underlying action changes. Test a fast toggle instead of clicking once and waiting politely for the effect.

Keep an immediate reduced-motion path. If the interface becomes ambiguous without the effect, improve the visible state before increasing the animation’s complexity.