Hacker News new | past | comments | ask | show | jobs | submit
You need @property for the interpolations between values for the animations
Isn't that what @keyframes is for?
@keyframes specifies what the values should be at specific moments in a timeline, but not what values they can be between those moments.

Certain types are continuous between two values which allow them to be smoothly interpolated in an animation. For example, an animation from 10px to 20px would be 15px in the middle.

Certain types are discrete, so they cannot be smoothly interpolated. For example: flex to grid. There's no half flex half grid value. An animation would just hard switch to the other value.

Variables can be assigned continuous typed values, discrete typed values, or values that can be continuous or discrete.

If you're animating over a value where you don't know if the animation is continuous or discrete, you have to treat it as discrete to avoid nonsense values.

This is why @property at-rule exists. It allows you to specify "this variable" is of a continuous type, and it can not be overridden by a discrete type in the future, which among other things, allows a variable to be animated smoothly when it otherwise couldn't be without the chance of encountering a nonsense value.