Core Code
Core Code Modern Dev Handbook

Custom Property Hover Effect

Variables registered with @property can animate on hover.

Preview

Code

<style>
@property --radius{
syntax: "<length>";
inherits: false;
initial-value: 0px;
}

.box{
width:120px;
height:80px;
background:#2563eb;
border-radius:var(--radius);
transition:--radius .3s;
}

.box:hover{
--radius:30px;
}
</style>

<div class="box"></div>

More CSS @property Examples (8)

example Basic @property Registration open example example Animate Custom Property open example example Animated Color Variable open example example Number Custom Property open example example Animated Gradient Variable open example example Property Inheritance Control open example example Fallback With @property open example example Animated Button Radius open example