animate

Start by identifying missing feedback, abrupt state changes, and unclear relationships in the interface. Then apply CSS transitions for state changes, keyframes for sequences, and transform plus opacity properties for GPU-accelerated motion with appropriate easing curves.

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 about 75% of entrance duration.

Use CSS transitions and keyframes for simple declarative animations and state changes. Use the Web Animations API, Framer Motion for React, or GSAP when you need programmatic control over complex interactive sequences.

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 usually comes from animating layout properties like width, height, top, or left, which trigger reflows. Animate only transform and opacity, use will-change sparingly, and verify 60fps on target devices.

Avoid animation when it serves no functional purpose, when users need speed over polish, or when it blocks interaction. Overuse causes animation fatigue, and bounce or elastic easing curves make interfaces feel dated.