CSS Animation Performance: Lessons Learned the Hard Way
Animating the wrong CSS properties can tank your frame rate. Here is about keeping animations smooth. I built a product tour animation once that was beautiful on my development machine but stuttered badly on a colleague's older laptop. The difference was that I was animating width and left . properties that trigger layout recalculations on every frame. Switching to transform and opacity fixed the stutter instantly. That experience sent me down a path of understanding the browser rendering pipeline, and it changed how I write every animation since. The Rendering Pipeline The browser rendering pipeline has four stages: Style calculation, Layout, Paint, and Compositing. Properties that trigger Layout (width, height, top, left, margin, padding) force the browser to recalculate the position of every element on every animation frame. This is expensive and causes jank on lower-end devices. Properties that only trigger Compositing (transform and opacity) skip the Layout and Paint stages entirely. The work is handed off to the GPU which handles it much more efficiently. My rule: if it needs to move, use translate() . If it needs to grow or shrink, use scale() .…