CSS Animation Performance — Compositor vs Layout

Spawn hundreds of animated elements and watch frame rate collapse when you animate layout-triggering properties instead of compositor-only transform / opacity.

Cheap vs Expensive — live FPS race

Increase the element count, switch to Layout, and compare the FPS meter. Compositor animations can stay near 60fps; layout forces reflow + paint every frame.

150
Mode:

Promotes layers early so the first frame is smoother — but each promoted layer costs GPU memory. Remove it after the animation ends in production.

FPS
—
target: 60
Mode
Compositor
transform + opacity
Elements
150
animated boxes

Your mileage will vary. FPS depends on your CPU, GPU, browser, and how many other tabs are open. Use this demo to see the relative gap between compositor and layout animation — not as a benchmark score.

Which property triggers what

The render pipeline runs style → layout → paint → composite. Animating deeper stages costs more per frame.

Composite — cheapest

  • transform (translate, scale, rotate)
  • opacity
  • filter (often composited)
  • translate / scale / rotate (individual)

GPU can move pre-painted layers — no reflow, no repaint.

Paint — medium

  • color, background-color
  • box-shadow, outline
  • border-radius
  • background-position

Skips layout but repaints pixels each frame.

Layout — most expensive

  • width, height
  • top, left, margin
  • padding, border-width
  • flex-basis, grid-template-*

Reflow cascades to siblings — cost scales with DOM size.

Rule of thumb: animate transform and opacity for motion. Use layout properties only when geometry must actually change — and prefer display transitions with @starting-style over animating height when possible.