Why are CSS transforms preferred for animations over margin or position changes?

Explanation

CSS transforms (translate, scale, rotate, skew) are GPU-accelerated and operate in the compositor layer, meaning they do not trigger layout (reflow) or paint. In contrast, animating margin, top, left, width, or height triggers layout recalculation, which is expensive and can cause jank. For smooth 60fps animations, always prefer transform and opacity (both compositor-only properties) over layout-affecting properties. The will-change property can hint the browser to optimize further.