HTML & CSS · Senior · Question 23 of 75
What does @property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; } enable?
- ✓Correct answer: Declaring a typed variable that the browser can animate
- 2Creating a constant that can't be overridden in the cascade
- 3Attaching a JavaScript handler called when the property changes
Explanation
A regular CSS variable is just a string, so it jumps during animation. A property registered with @property (part of Houdini) has a type and therefore animates smoothly: that's how rotating conic gradients and animating individual color channels are done. You can also disable inheritance and set an initial value.