What is the difference between reflow, repaint and a composite-only change?

A reflow recomputes layout, a repaint redraws pixels, and a composite-only change just moves existing layers. They go from most to least expensive.

Reflow (also called layout) happens when something changes geometry. Examples are width, height, margins, font size, or adding and removing elements. The browser must recompute positions and sizes, often for the element's neighbours and children too. Then it must repaint. Reflow is the most expensive of the three.

Repaint happens when something visual changes but layout stays the same. Examples are color, background-color or box-shadow. The browser skips layout but redraws the pixels.

Composite-only changes skip both layout and paint. Examples are transform or opacity on an element in its own layer. A layer is like one sheet in a stack of transparent sheets. The compositor is the part of the browser that stacks those sheets to make the final image. For a composite-only change, it just moves or fades an existing sheet. It often does this on the GPU (the graphics chip) and off the main thread. This is why transform and opacity are preferred for animations.