How CSS triggers layout, paint, and composite — and why it matters

CSS and the Rendering Pipeline

Not all CSS changes are equal. Some trigger the full rendering pipeline (layout → paint → composite), others skip to paint, and the most performant only trigger composite — handled entirely on the GPU without touching the main thread.

Layout-triggering (most expensive): width, height, top, left, margin, padding, font-size. Any change forces the browser to recalculate positions for the element and potentially all its siblings and parents.

Paint-triggering (medium cost): color, background, border-color, box-shadow. No geometry changes, but pixels must be redrawn.

Composite-only (cheapest): transform and opacity. The browser promotes the element to its own GPU layer and composites it without touching layout or paint.

/* ✗ Triggers layout + paint + composite on every frame */
@keyframes slide-bad {
  from { left: 0; }
  to { left: 300px; }
}

/* ✓ Composite-only — 60fps even on slow devices */
@keyframes slide-good {
  from { transform: translateX(0); }
  to { transform: translateX(300px); }
}

Use will-change: transform to hint the browser to promote an element to its own compositor layer before an animation starts, avoiding the promotion cost mid-animation:

.animated-card {
  will-change: transform; /* promote to GPU layer in advance */
}