Custom properties with Houdini’s new API
The CSS Properties and Values API Level 1 (Houdini Props and Vals) allows us to give structure to our custom properties. It will protect custom properties' format and fallback value.
Web developers could use JavaScript > CSS.registerProperty
method or CSS @property
init custom properties. With Houdini Props and Vals supported, browser will have animation effect with transition-property which set as custom properties. Such as transition:--inline-size 1s;
.
Just hover / tap the following element and you will see "magic
".
※ Sorry! Current browser doesn't support CSS Houdini Props and Vals. There will be no animation when you tap / hover this element.
Houdini Props and Vals's setup
Here comes sample code with JavaScript > CSS.registerProperty method. --gradient-start
& --gradient-end
had already set format with color. So there will have perfect transition animation with custom properties mutation.
Otherwise you could use pure CSS to setup Houdini Props and Vals.