The four CSS properties that trigger layout
Animate the wrong property and every frame re-measures the page. Animate the right one and the compositor handles it alone.
The rule is old and still true: animate transform and opacity, and leave everything else alone. What is worth knowing is which properties cost what.
| Property | Work it causes | Read |
|---|---|---|
| transform | Composite only | Cheap |
| opacity | Composite only | Cheap |
| background-color | Paint | Watch it |
| width, height, top, left | Layout, then paint, then composite | Expensive |
The expensive row is the one people animate, because it is the one that reads naturally in a stylesheet.