Skip to content
FrontendHaltFrontendHalt
CSS·Intermediate·Coding·1 min read

What does animating width typically force the browser to do on every frame?

Short interview answer

It typically forces layout recalculation because width affects the geometry of the box and potentially its siblings, and that new geometry usually needs to be repainted, which is far more expensive than a compositor-only update.

Example

CSS
/* expensive: layout + paint every frame */.bar { transition: width 300ms; }
/* cheaper: compositor only */.bar { transform: scaleX(0); transform-origin: left; transition: transform 300ms; }

Key takeaway

Explain the underlying mental model clearly, then support it with a concrete example and its trade-offs.

← Back to CSS animations and transitions

Related questions