<div class="box"></div>
@property --scale {
syntax: "<number>";
inherits: false;
initial-value: 1;
}
.box {
--scale: .5;
width: 100px;
height: 100px;
background-color: purple;
transform: scale(var(--scale));
animation: pulse 1s alternate infinite;
}
@keyframes pulse {
100% {
--scale: 1;
background-color: yellow;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.