demo · v138

Typed animation tuner

Three custom properties — one <angle>, one <time>, one <number> — feed three shapes. Multiplying and dividing across unit types is what typed arithmetic enables: the period speeds up and the amplitude scales and a bar height converts from degrees to pixels, all in a single calc.

checking @property + typed arithmetic…
2.0s
30°
1.00×

pendulum — rotate(amp)

gear — animation-duration: period × 2 ÷ speed

bar — height: amp / 90deg * 100px

the cross-unit calc

@property --period { syntax: "<time>"; inherits: true; initial-value: 2s; }
@property --amp    { syntax: "<angle>"; inherits: true; initial-value: 30deg; }
@property --speed  { syntax: "<number>"; inherits: true; initial-value: 1; }

.bar       { height: calc(var(--amp) / 90deg * 100px); }          /* angle / angle × length */
.pendulum  { animation-duration: calc(var(--period) / var(--speed)); } /* time / number */
.gear      { animation-duration: calc(var(--period) * 2 / var(--speed)); }

Pre-138, dividing a <time> by a <number> in calc() worked — but dividing two typed values, or doing the amp / 90deg * 100px kind of unit cancellation that produces a different unit, was rejected as a syntax error. Typed arithmetic in 138 makes the math compose like physics homework.

see also