From code to boxes
Before anything is drawn, the browser has parsed the HTML into the DOM, a tree of elements, and the CSS into the CSSOM, a tree of rules. Rendering turns those trees into pixels in four stages: style, layout, paint, composite.
Style works out every element's final values. The selector .card matches the div, so its computed style is width 200px, height 40px, background gold and translate none. Anything the CSS leaves unset keeps its default.
The p element matches p { display: none; }. Its style is worked out, but it gets no box at all. Layout, paint and the screen never see it, and it takes up no space on the page.
From boxes to pixels
Layout works out the geometry of every box: how big and where. The card's box is 200 by 40 CSS pixels. It starts 8px from the top and the left, because the body has a default 8px margin.
Paint draws each box in a fixed order: backgrounds first, then text on top. Here a gold 200 by 40 rectangle, then the word Hi. The pixels go into a layer, a picture kept off screen, not straight onto the page.
Composite stacks the painted layers in the right order, applies any transform or opacity, and hands the finished frame to the screen. Only now does the gold card appear.
A 60 Hz screen shows a new frame every 1000 ÷ 60 ≈ 16.7 ms. While something moves, every stage it reruns must finish inside that budget, or frames are dropped and the motion stutters.
What a change costs
Change width to 260px and the box's geometry changes. So the browser reruns style, then layout (the box is now 260 wide), then paint, then composite. A layout change can also move other boxes, so this is the costly path.
Change background to tomato. The size and place do not change, so layout is skipped: style, then paint (the new colour), then composite. Cheaper, but every changed pixel is painted again.
Change translate to 40px. The dashed layout box stays put; only the painted layer moves 40px right. The browser can skip layout and, when the card has its own layer, paint too. So smooth animations use transform and opacity.
What happens
;; step 1/10 · parse
index.html → DOM div.card ("Hi"), p ("Bye")
style.css → CSSOM .card, p
then, every frame that needs it:
Style → Layout → Paint → Composite
Whether a translate or transform change also skips paint depends on the element having its own compositor layer. Browsers usually give one to an element while its transform or opacity is animating, and will-change: transform asks for it ahead of time. Each browser engine has its own names and extra stages (Chrome, for example, splits paint into recording and rasterising, and running layout again is often called reflow), but every one runs style, layout, paint and composite in this order.