Advanced CSS Animations: The 60fps Guide to Delightful Motion

Animation done wrong destroys user experience and device battery. Animation done right signals quality, guides attention, and makes interactions feel physical. The performance gap between these outcomes comes down to which CSS properties you animate, how you orchestrate them, and whether you respect the browser's rendering pipeline.

The Compositor Thread: Your Performance Foundation

The browser renders frames using two threads: the main thread (JavaScript execution, layout, paint) and the compositor thread (layer compositing). Animations running only on the compositor thread maintain 60fps even when the main thread is busy. Only two CSS properties composite cleanly: `transform` and `opacity`. Every other animated property — width, height, top, left, background-color — triggers layout or paint and risks frame drops. This is the most important rule in CSS animation performance.

The FLIP Technique: Animating From and To

FLIP (First, Last, Invert, Play) enables smooth transitions for elements that move between DOM positions — an element expanding from a card into a fullscreen view, a list item moving to a different position. The technique: capture the element's starting position (First), move it to the end state (Last), calculate the difference and apply an inverted transform (Invert), then animate the transform to zero (Play). The result is a smooth position change using only compositor-safe transform.

Scroll-Driven Animations: Pure CSS

Chrome 115+ brought native scroll-driven animations without JavaScript. Link an animation's progress to scroll position using `animation-timeline: scroll()` or element visibility using `animation-timeline: view()`. This enables parallax effects, scroll-progress indicators, and reveal animations that were previously only possible with Intersection Observer and JavaScript.

The View Transitions API

The View Transitions API (now stable in Chrome, Safari, and Firefox) enables smooth animated transitions between page states — including full-page navigations in multi-page apps. Tag elements with `view-transition-name` and the browser automatically captures and morphs them across navigation. Combined with Next.js App Router, this delivers native-app-quality page transitions with minimal code.