Core Code
Core Code Modern Dev Handbook

Animate Custom Property

@property enables smooth animation of custom properties.

Preview

Code

<style>
@property --angle{
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}

.box{
width:120px;
height:80px;
background:#22c55e;
transform:rotate(var(--angle));
animation:spin 2s linear infinite;
}

@keyframes spin{
from{--angle:0deg;}
to{--angle:360deg;}
}
</style>

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

More CSS @property Examples (8)

example Basic @property Registration open example example Animated Color Variable open example example Number Custom Property 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