Animation as Communication
Motion design in UI is not decoration. Every transition communicates something: a state change, a relationship between elements, the system's confidence in its own response.
The question is never can we animate this — the answer is always yes. The question is what does this animation communicate, and is that worth the cost?
The Cost of Animation
Animation has three costs: cognitive (user attention is finite), performance (frame rate and battery), and accessibility (vestibular disorders, reduced motion preferences). Every animation must justify all three.
Rules I Actually Use
Duration: Interface animations should be 150–300ms. Shorter feels instant; longer feels sluggish. Exceptions exist for hero transitions and onboarding flows.
Easing: Ease-out for elements entering the screen (starting fast, decelerating). Ease-in for elements leaving. Ease-in-out for elements that transform in place.
Respect reduced-motion: Always. Use @media (prefers-reduced-motion: reduce) and strip non-essential animations entirely.