animate

Start by assessing where motion adds value: missing feedback, abrupt state changes, and unclear relationships. Then implement entrance animations, micro-interactions, and transitions using CSS transitions or keyframes for simple cases, and the Web Animations API, Framer Motion, or GSAP for complex sequences.

Animate only transform and opacity, which are GPU-accelerated and avoid layout recalculation. Never animate layout properties like width, height, top, or left, and use will-change sparingly only for known expensive animations.

Use 100-150ms for instant feedback like button presses, 200-300ms for state changes like hovers and menus, 300-500ms for layout changes like modals, and 500-800ms for entrance animations. Exit animations should run at about 75% of the entrance duration.

Wrap animations in a media query that sets animation-duration and transition-duration to 0.01ms when the user prefers reduced motion. Always provide non-animated alternatives so motion-sensitive users get an equivalent experience.

Avoid bounce and elastic easing curves because they feel dated and draw attention to the animation itself. Prefer natural deceleration curves like ease-out-quart, ease-out-quint, or ease-out-expo for smooth, refined motion.