Expert CSS: The CPU Hack

A "CPU Hack" implies unlocking the ability for continuous crunching of data and re-evaluation of state.

For example, if cyclic vars didn't automatically fail to invalid (initial) state in CSS, this would continuously increment the value of --frame-count here:

body {
  --input-frame: var(--frame-count, 0);
  --frame-count: calc(var(--input-frame) + 1);
}

Spoiler alert: You actually can do this in CSS, without ever touching JS, I'll show you how!

The 5 Observables

First, let's establish a handful of observations of advanced CSS animation …

alert body continuous cpu css data evaluation expert fail hack input state value var