We can make variables in CSS pretty easily:
:root {
--scale: 1;
}And we can declare them on any element:
.thing {
transform: scale(var(--scale));
}Even better for an example like this is applying the variable on a user interaction, say :hover:
:root {
--scale: 1;
}
.thing {
height: 100px;
transform: scale(var(--scale));
width: 100px;
}
.thing:hover {
--scale: 3;
}But if we wanted to use that variable in an animation… nada.
:root {
--scale: 1;
}
@keyframes scale {
from { --scale: 0; }
to { --scale: 3; }
}
/* Nope! */
.thing {
animation: scale .25s ease-in;
height: 100px;
width: 100px;
}That’s because the variable is recognized as a string and what we need is a number that can be interpolated between two numeric values. That’s where we can call on @property to not only register the variable as a custom property, but define its syntax as a number:
@property --scale {
syntax: "<number>";
initial-value: 1;
inherits: true;
}Now we get the animation!
You’re going to want to check browser support since @property has only landed in Chrome (starting in version 85) as of this writing. And if you’re hoping to sniff it out with @supports, we’re currently out of luck because it doesn’t accept at-rules as values… yet. That will change once at-rule()becomes a real thing.
