Opacity and Scale

Not all CSS properties are equal in animation. Some trigger a full recalculation of page layout on every frame. Others are handled entirely on the GPU, updating without touching the layout engine at all. This distinction determines whether an animation runs at 60fps or drops frames.

The compositing model

Browsers render pages in layers. Properties that affect composited layers — opacity and transform (which includes scale, translate, and rotate) — can be animated by the GPU without the CPU needing to recalculate layout. This means they can run at 60fps even on mid-range hardware. Properties that affect geometry — width, height, top, left, margin, padding — force the browser to recalculate layout on every animation frame, which is expensive and causes dropped frames on any non-trivial page.

Opacity

Opacity is the simplest composited property. Animating from 0 to 1 (fade in) or 1 to 0 (fade out) makes an element appear or disappear without affecting layout. The element still occupies space even at opacity: 0 — if you need to also remove it from layout, combine with display: none after the exit animation completes, or use visibility: hidden.

Scale (via transform)

transform: scale() changes the visual size of an element without affecting its layout footprint. A button that scales to 0.97 on press looks smaller, but the surrounding layout does not shift to fill the space. This is the correct behaviour for interactive feedback. Never animate width or height to achieve the same visual effect — use transform: scale() instead.

Translate (via transform)

transform: translate() moves an element visually without affecting layout. A panel that slides in from the right using translateX(100%) does not push page content as it moves — it composites on top. This is always preferable to animating left or right properties, which trigger layout recalculation.

The will-change property

will-change: transform tells the browser to promote an element to its own compositing layer before the animation begins, avoiding a brief lag when the promotion happens mid-animation. Use it sparingly — promoting too many elements to their own layers consumes GPU memory. Apply it only to elements you know will animate, and remove it after the animation completes when possible.

The takeaway

Default to opacity and transform for all animations. Treat any animation of width, height, top, left, margin, or padding as a performance red flag — find a transform-based equivalent. This is not an optimisation to apply later; it is the correct way to build motion from the start.