1
HTML/CSSAdvanced#css#z-index
HTML/CSSAdvanced#css#performance#animations
Why should you animate transform/opacity instead of top/left/width for performance?
transform and opacity can be handled entirely on the GPU compositor thread without triggering layout (reflow) or paint, resulting in smoother 60fps animations. Animating top/left/width/height forces the browser to recalculate layout on every frame, causing jank.
Example
/* Janky: triggers layout every frame */
.box { transition: left 0.3s; }
.box.moved { left: 200px; }
/* Smooth: GPU-composited */
.box { transition: transform 0.3s; }
.box.moved { transform: translateX(200px); }