# 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.

```css
.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.

```css
@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.

| Question | Better starting point |
| --- | --- |
| Does a property change when state changes? | Transition |
| Is there a deliberate multi-step sequence? | Keyframes |
| Must code control playback or cancellation? | Consider the Web Animations API |

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

---
SkillStall · 2026-10-02
MDN: prefers-reduced-motion: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion