animate

Add animations by using CSS transitions for simple state changes and Framer Motion for complex interactive sequences in React. Animate only transform and opacity properties to keep animations GPU-accelerated and smooth at 60fps.

Use ease-out curves like cubic-bezier(0.25, 1, 0.5, 1) or cubic-bezier(0.16, 1, 0.3, 1) for natural deceleration. 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.

Yes, wrap animations in a @media (prefers-reduced-motion: reduce) query that sets animation and transition durations near zero. This is an accessibility requirement for motion-sensitive users and must never be skipped.

Jank happens when animating layout properties like width, height, top, or left, which trigger expensive reflows. Animate transform and opacity instead, and use will-change sparingly only for known expensive animations.

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