Animating CSS Custom Properties Requires a Numeric Type
CSS variables are straightforward to declare and reuse across selectors, including on interactive states like :hover. However, trying to animate a variable directly fails because the browser treats the custom property’s value as a string, and animation needs a numeric value it can interpolate between two endpoints.
That’s where the @property at-rule steps in. It doesn’t just register the custom property—it also defines its syntax, letting you declare the variable as a number. With that type in place, the variable becomes animatable, and the transition between values works as expected.
Keep browser support in mind before relying on this technique. @property is currently available only in Chrome, starting with version 85. Feature detection via @supports isn’t possible yet either, since the rule doesn’t accept at-rules as values—though that limitation may disappear once the proposed at-rule() function becomes a reality.
