Interpolating Numeric CSS Variables

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.