animation-vocabulary

Use precise terms from the animation vocabulary: name the pattern (fade in, slide in, shared element transition), the easing (ease-out, spring), and timing details (duration, stagger delay). This replaces vague requests with implementable specifications.

Easing animations run for a fixed duration with a defined speed curve like ease-out or cubic-bezier. Spring animations are driven by physics parameters (stiffness, damping, mass) instead of duration, producing natural motion that can be interrupted and redirected mid-flight.

Animate transform and opacity, which the GPU can composite without recalculating layout. Animating width, height, top, or left causes layout thrashing and dropped frames, producing visible jank.

A shared element transition is when an element travels and transforms from one position into another, such as a thumbnail expanding into a full card. It maintains spatial consistency so users track where content went across states.

Ease-in starts slow and feels sluggish for UI responding to user input; prefer ease-out. Linear easing moves at constant speed and should be reserved for spinners or marquees, not interactive elements.