Transitions Over Keyframes for Retriggered Motion
SHOULD: Drive rapidly-retriggered motion (toasts, toggles) with CSS `transition` or a spring, not `@keyframes` — a transition retargets from the element's current value, while a keyframe animation restarts from its `from` and visibly teleports.
Drive rapidly-retriggered motion with CSS transitions, not keyframes, so it retargets instead of restarting
Bad
Good
Why it matters
A transition interpolates from the element's current computed value, so interrupting it mid-flight simply re-aims at the new target from wherever the element is. A keyframe animation is absolute: it always plays its declared `from` → `to`, so retriggering it teleports the element back to the start before it moves again. Spam-click a toggle and the difference is unmistakable.
Springs share the transition property here — they carry velocity through an interruption — which is why they suit reversible gestures.