A structured lesson workspace with readable content, hands-on examples, and a clean path to completion.
| Concern | What to inspect | Typical failure |
|---|---|---|
| Core behavior | Performance-Friendly Animations | Animating width, top, or other layout-affecting properties can trigger repeated layout work. Transform and opacity are often friendlier, but they are not free and should still be profiled. |
| Production test | Real content and constraints | The rule works only for the demo values |
| Maintenance | Scope and override path | A later fix creates another exception |
The useful mental model here is practical: how layout, paint, and compositing differ and why some animated properties are cheaper than others. When a rule looks obvious but the browser produces something else, start by identifying which constraint or rendering phase is actually winning.
<style>.demo { transform:translateX(20px); }</style><main class="demo">Example content</main>
Engineering judgment: Use DevTools performance tooling to confirm the bottleneck. “Animate transforms” is a strong default, not proof that every animation is cheap.
<style>.demo { opacity:0; }</style><main class="demo">Example content</main>
In production, Animating width, top, or other layout-affecting properties can trigger repeated layout work. Transform and opacity are often friendlier, but they are not free and should still be profiled. That is the kind of bug that survives visual spot checks because the stylesheet is syntactically valid while the layout contract is wrong.
A good CSS change narrows the problem. Use DevTools performance tooling to confirm the bottleneck. “Animate transforms” is a strong default, not proof that every animation is cheap. This keeps the rule understandable when content, theme, or viewport conditions change later.
<style>/* Prefer transform over width in a loop */</style><main class="demo">Example content</main>
Avoid layout churn is useful here because it demonstrates performance-friendly animations under a concrete input rather than as an abstract property list.
<style>.demo { contain:paint; }</style><main class="demo">Example content</main>
Contain paint is useful here because it demonstrates performance-friendly animations under a concrete input rather than as an abstract property list.
Finish the lesson once you have worked through the material. This awards ★ 30 XP.