A micro-interaction checklist

Motion should explain a change, not announce it. Here is the checklist I run before shipping any transition.

Durations

• Under 100ms reads as instant — use it for hover and focus
• 150 to 250ms reads as responsive — use it for most state changes
• Over 400ms reads as a decision the interface made without you

If you cannot decide, choose the shorter one. Nobody has ever complained that an interface responded too quickly.

The one that gets skipped

Every animation needs a reduced-motion path. Not a slower version — an instant one. The state change still has to happen; only its choreography goes away.

Easing, briefly

Things entering the screen decelerate. Things leaving accelerate. Things moving between two on-screen positions do both. That is nearly the whole of it, and it maps to how objects behave in a world with friction, which is why it reads as natural rather than as animation.

The test

Set the animation to five times its duration and watch it once. Every flaw becomes obvious — the overshoot, the property that starts late, the element that moves along a path nothing else uses. Then set it back and trust what you saw.