animate

Use a CSS transition on opacity and transform with a strong ease-out curve at 150-250ms, scaling from 0.95 rather than 0. Set transform-origin to the trigger element so the panel appears to emerge from what the user clicked.

Use CSS transitions for hovers, presses, and state toggles, and WAAPI for programmatic control without dependencies. Reach for Motion only when you need springs, layout animations, exit animations, or gesture-driven values.

Use ease-out for entering and exiting elements, ease-in-out for on-screen movement, and linear only for constant motion like progress indicators. Never use ease-in on UI because it delays the exact moment the user is watching.

No. Elements triggered 100 or more times per day, such as keyboard shortcuts or command palettes, should have no animation at all. Frequently used elements get only near-imperceptible motion, while delight is reserved for rare first-time moments.

Wrap animations in a prefers-reduced-motion media query that keeps opacity and color transitions but drops transform-based movement. Reduced motion means fewer and gentler animations, not zero animation.

Frame drops happen when animating layout properties like width, height, or top, or when using Motion's x, y, and scale shorthand props. Animate only transform and opacity, and in Motion pass the full transform string for hardware acceleration.