Compositing layers

Compositing is the last stage. The browser takes the painted layers, positions them in the right order, and produces the final frame that goes to the screen.

Most of the page lives on one layer. But some content gets its own composited layer, a separate bitmap the browser can move, scale, or fade without touching the others. This work happens off the main thread, often on the GPU.

That’s why transform and opacity are the good properties to animate. If the element has its own layer, each frame needs only compositing. No layout, no paint. The main thread can be busy with JavaScript and the animation stays smooth.

Compare that with animating left or width. Every frame changes geometry, so every frame runs layout, paint, and compositing.

It’s not automatic magic

Whether an element gets its own layer is the browser’s decision. It depends on the properties, on what’s around the element, and on heuristics that change between versions. A transform animation can still trigger paint during setup, or when the content inside the layer changes.

Layers cost memory too. Each one holds rasterized pixels, and the browser has to manage all of them. Adding will-change: transform everywhere can make performance worse, not better. Use it on the one or two elements that animate, and only if a recording shows the problem.

Measure the difference

Let’s compare the two approaches on a card. First with left:

@keyframes slide {
  to { left: 200px; }
}

Then with transform:

@keyframes slide {
  to { transform: translateX(200px); }
}

Record both in the Performance panel with CPU throttling set to 4x. With left you’ll see Layout and Paint events on every frame and probably dropped frames in the Frames track. With transform the Main track is quiet after the first frame.

Turn on Paint flashing from the Rendering tab as a second check. The left version flashes continuously. The transform version doesn’t.

My advice is to write the effect you want, record it, and let the evidence guide any layer tuning. Don’t add will-change on a hunch.