Interruptibility
The difference between an interface that feels alive and one that feels broken is what happens when you act during an animation.
Interactive state changes – hover, toggle, open and close – are CSS transitions, because a transition interrupted halfway continues from its current value. Keyframes restart from the beginning, so they are kept for one-shot staged sequences nobody will interrupt.
The collection's motion is built the same way at a lower level: one animation loop owns every card's pose and blends toward a live target, so a mode change or a scroll during a reflow continues from wherever the card visibly is. The flight into a room reverses its own animations if you close during it, rather than playing a second animation over the first.
- Transitions for anything a person can interrupt; keyframes only for one-shot sequences
- Blend to a live target, never to a snapshot
- A close during an open reverses; it does not layer