:root{--colorA:#000;--colorB:#fff}@property --houdini-colorA{syntax:"<color>";inherits:false;initial-value:#000}@property --houdini-colorB{syntax:"<color>|<length>";inherits:false;initial-value:#fff}#test>div div{width:100px;height:100px;cursor:pointer;border-color:red}.aaa{background:linear-gradient(45deg,var(--colorA),var(--colorB));-webkit-transform:1s background;transform:1s background}.aaa:hover{--colorA:red;--colorB:#00f}.bbb{background:linear-gradient(45deg,var(--houdini-colorA),var(--houdini-colorB));transition:--houdini-colorA 1s,--houdini-colorB 1s}.bbb:hover{--houdini-colorA:#9acd32;--houdini-colorB:#ff1493}@property --per{syntax:"<percentage> | <angle>";inherits:false;initial-value:25%}.ccc{background:var(--colorA);border-radius:50%;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);background:conic-gradient(#9acd32,#9acd32 var(--per),transparent var(--per),transparent 100%);transition:--per .3s linear}.ccc:hover{--per:80%}@property --offset{syntax:"<length>";inherits:false;initial-value:5px}.ddd{text-underline-offset:var(--offset,1px);text-decoration:underline;text-align:center;transition:--offset .4s,text-decoration-color .4s;font-size:24px}.ddd:hover{--offset:10px;color:orange;-webkit-text-decoration-color:orange;text-decoration-color:orange}