I've been inventing CSS tricks for a while. Like my Space Toggle, the latest one blows the lid off of what's possible in 100% CSS.

It's cyclic --var computation. Under normal circumstances any cyclic var would be forced into its initial state. I figured out a way around it with two animations that, one, capture output then, two, hoist it back up as input.

Part of the trick is to sequence the playing state of capture and hoist animations:

  running paused
  paused paused
  paused running
  paused paused

There's a number of ways to ensure this play state sequence but, notably, animations aren't supposed to be able to directly control the state of other animations, so we have to rely on tricks there too.

The other clue in the trick is that a paused animation's value won't change if input changes because animation state overrides static state even when paused.

  Static:
  --in: 1;
  --out: calc(var(--in) + 1);

  capture:
  --held: var(--out);

  hoist:
  --in: var(--held);

That's the basics!

// Jane Ori