The big win for me has been that this feature let's you animate css variables. A place I used it a while back was a little experiment where I tweaked youtube's design to look "neon" -- eg all the lines and stuff were bright red and glowed. I designed it so the hue of the primary colour was controlled by a single css variable. I then thought why not make this extra insane and animate the hue slowly through the spectrum so that the colour of the page is changing slowly in the background! Apparently you can't animate a css variable without @property. So it's not just letting you use a css variable instead of a raw value, it's letting you animate the css variable -- and, in turn, all the places that css variable is referenced! So with one simple `@keyframes neon-flow { from { --dc-neon-hue: 0; } to { --dc-neon-hue: 360; } }`, I animate everything -- all the primary colours, all the box shadows, etc.
`inherits: false` lets you control how the property is inherited. For example, in normal css, the property `color: red` is inherited. If you set it on a div, all elements in the div will have `color:red` unless they specifically override it. But, say the property `display: flex` does not behave this way. If I set it on the div, only the div becomes display flex. This is exposing the ability to control how your custom property is inherited -- like `color` (`inherits: true`) or like `display` (`inherits: false`).
I believe the type is there so that it can at static time know what to animate. Since a css variable can be anything, unlike a css property. E.g. `from { color: red } to {color: blue}` it knows the types because of the properties. With css variables, it needs to be told what the types are.
`inherits: false` lets you control how the property is inherited. For example, in normal css, the property `color: red` is inherited. If you set it on a div, all elements in the div will have `color:red` unless they specifically override it. But, say the property `display: flex` does not behave this way. If I set it on the div, only the div becomes display flex. This is exposing the ability to control how your custom property is inherited -- like `color` (`inherits: true`) or like `display` (`inherits: false`).
I believe the type is there so that it can at static time know what to animate. Since a css variable can be anything, unlike a css property. E.g. `from { color: red } to {color: blue}` it knows the types because of the properties. With css variables, it needs to be told what the types are.
Added fun fact: the type syntax is actually the same syntax you'll see on like mdn! https://developer.mozilla.org/en-US/docs/Web/CSS/color#forma... . So it's like exposing the internals of CSS as an API any developer can use :)