CSS Animations That Stay Smooth: Performance From the Ground Up
Janky animations ruin an interface. After optimizing dozens of projects, here are the performance rules I follow for buttery CSS motion. Animation performance is one of those topics where a little knowledge goes a long way. The first time I animated a layout, I animated the width of a container on hover and watched the whole page stutter. I blamed the browser, the device, the framework. None of those were the problem. The problem was that I was animating a property that forces the browser to do layout work on every frame. Once I understood which properties are cheap to animate and which are expensive, my animations stopped janking. Here is. Only Animate Transform and Opacity The single most important rule in CSS animation performance is this: only animate transform and opacity. Everything else is more expensive. The reason comes down to how the browser renders a frame. The rendering pipeline has four main stages: style, layout, paint, and composite. When you change a property like width, margin, or top, the browser has to re-run layout for the affected elements and everything around them, then repaint, then composite. More guides are on the Spark Blog.