animate

Use a CSS transition on opacity and transform with scale(0.95) as the starting state, 150–250ms duration, and a strong ease-out curve like cubic-bezier(0.23, 1, 0.32, 1). Set transform-origin to the trigger element so the panel appears to grow out of what was clicked.

Use CSS transitions for hover, press, and state toggles; WAAPI for programmatic control without dependencies; Motion only when you need springs, layout animations, exit animations, or gesture-driven values. Pick the cheapest tool that fits the requirement.

Skip animation for actions triggered 100+ times per day, such as keyboard shortcuts or command palette toggles. Near-imperceptible motion suits tens-of-daily actions, while full animation budgets belong to occasional or first-time events like onboarding.

Animating width, height, margin, or top/left triggers layout and paint on every frame. In Motion, the x/y/scale shorthand props are not hardware-accelerated — use the full transform string like translateX(100px) instead, and stick to transform and opacity.

Wrap motion in a @media (prefers-reduced-motion: reduce) block that keeps opacity and color transitions but drops transform-based movement. Reduced motion means fewer and gentler animations, not zero — transitions that aid comprehension should remain.

Use CSS transitions, not keyframes, for toasts and anything triggered rapidly. Transitions retarget from the current value when re-triggered, while keyframes restart from zero, causing visible jumps when a user fires the action twice quickly.