Why should you animate transform and opacity instead of other properties?

CSSPerformance

The short answer

transform and opacity are the two properties the browser can animate on the compositor, separate from the main thread, so they stay smooth even when the page is busy. Animating properties like width, height, top, or left forces the browser to recalculate layout and repaint on every frame, which is expensive and often drops frames. Sticking to transform and opacity is the single most reliable way to keep animations at 60 frames per second.

The browser rendering pipeline

To put pixels on screen the browser runs three stages:

  1. Layout: calculate the size and position of every element
  2. Paint: fill in pixels, text, colors, and borders
  3. Composite: assemble the painted layers into the final image

The earlier a stage you trigger, the more work the browser redoes. Layout is the most expensive because changing one element's geometry can shift many others.

Why most properties are slow to animate

/* Forces layout and paint on every frame */
@keyframes grow-bad {
  from {
    width: 100px;
    left: 0;
  }
  to {
    width: 300px;
    left: 200px;
  }
}

Animating width and left changes geometry, so the browser runs layout, then paint, then composite, sixty times a second. On a complex page that cannot keep up and the motion stutters.

Why transform and opacity are fast

/* Composite only, no layout or paint */
@keyframes grow-good {
  from {
    transform: scaleX(1) translateX(0);
    opacity: 0;
  }
  to {
    transform: scaleX(3) translateX(200px);
    opacity: 1;
  }
}

transform and opacity do not affect layout or the painted pixels of an element. The browser paints the element once, promotes it to its own layer, and then only the compositor moves and fades that layer. That work can run on the GPU and off the main thread.

The will-change hint

You can tell the browser ahead of time that a property will animate, so it prepares a layer in advance:

.card {
  will-change: transform;
}

Use it sparingly. Every promoted layer costs memory, so apply will-change only to elements that are about to animate, and consider removing it once the animation is done.

Interview Tip

Name the pipeline: layout, paint, composite. Then explain that transform and opacity skip straight to composite, while width, height, top, and left reach all the way back to layout. If you can also mention will-change as a way to hint a layer in advance, and warn that overusing it wastes memory, you cover the whole topic.

Why interviewers ask this

Smooth animation is a common performance question because the wrong property choice is such a frequent cause of jank. Interviewers want to see that you understand the layout, paint, and composite pipeline, that you know which properties stay on the compositor, and that you treat will-change as a targeted hint rather than a blanket fix. It shows you can build motion that holds up on real devices.

Table of Contents