38 / Colour

Scoped Rotation

The same colour change, asked of a few elements or of a great many. Press the switch and watch the counter beside it.

also called custom property invalidation · style recalc scope

Where the angle is declared decides what it costs. On the root, every element on the page re-resolves its colours each frame; on the stage, only the stage does. Scope is the whole difference between a palette that animates for free and one that eats the frame budget.

How it is built

.stage { --rot: 0deg; animation: turn linear both; animation-timeline: scroll(root) } /* declared on .stage, not :root — only this subtree re-resolves each frame */