Core Code
Core Code Modern Dev Handbook

Number Custom Property

Use numeric custom properties with @property.

Preview

Code

<style>
@property --scale{
syntax: "<number>";
inherits: false;
initial-value: 1;
}

.box{
width:100px;
height:60px;
background:#9333ea;
transform:scale(var(--scale));
animation:growth 1.5s infinite alternate;
}

@keyframes growth{
from{--scale:1;}
to{--scale:1.4;}
}
</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 Custom Property Hover Effect 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