so maybe i'm an old fogey and there's a compelling reason this doesn't actually work (i am simply posting it rather than trying it), but could @staff not just give us
@keyframes crime {
0% {
--progress: 0;
}
100% {
--progress: 1;
}
}
and make arbitrary animation very easier
PS: lmao it turned @keyframes into a link
PPS: oh no within single backticks too
PPPS: hey... syntax highlighting
PPPPS: LOL nevermind, variables aren't animatable without @property which isn't supported everywhere yet
but it doesn't work as-written and it can only work in Chrome. The thing about CSS animations is that they rely on the ability to interpolate between two values to find a midpoint to use at each frame. So if you're animating an element's position, it'll choose a point in between the two <length> values, and if you're animating a color, it'll choose a color in between the two <color> values (which is a whole production that I'll probably write about later).
But CSS values aren't parsed in isolation. To know what the type of a value is, you have to know what property that value is for. But custom properties like the proposed --progress can be used anywhere, so they have no intrinsic parsing semantics for their values. In fact, they allow any sequence of CSS tokens as their value, and only parse them as a specific type for individual properties after the var() functions are resolved.
So what happens if you try to animate a custom property? It just has its initial value (0 in this case) until halfway through the animation at which point it jumps immediately to its final value (1 in this case). This is unfortunately not all that useful for CSS crimes.
The good news is that the CSS working group is aware of this pain point and in fact has specified a fix. You can use the @property rule to teach the browser to treat specific custom properties as though they were real properties with real parsing rules. So staff could also add:
@property --progress {
syntax: "<number>";
inherits: false;
initial-value: 0;
}This would properly interpolate --progress between 0 and 1 with the animation. Hooray! However, @property is a relatively new addition to CSS and those things tend not to be universally available. It'll work great in Chrome, but not in Firefox or Safari, so in practice it doesn't really work at all.
