animate

Assess where motion adds value first: missing feedback, abrupt transitions, and unclear relationships. Then implement entrance animations, button feedback, and state transitions using CSS transitions or keyframes with transform and opacity for GPU acceleration.

Use natural deceleration curves like ease-out-quart cubic-bezier(0.25, 1, 0.5, 1) or ease-out-expo cubic-bezier(0.16, 1, 0.3, 1). Avoid bounce and elastic curves, which feel dated and draw attention to the animation itself.

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

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

Jank occurs when animating layout properties like width, height, top, or left, which trigger expensive reflows. Animate only transform and opacity, use will-change sparingly, and verify 60fps on target devices.

Use CSS transitions and keyframes for simple declarative state changes. Switch to the Web Animations API, Framer Motion for React, or GSAP when you need programmatic control, complex sequenced timelines, or interactive gesture-driven motion.