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 …


Interpolating Numeric CSS Variables originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

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.


Interpolating Numeric CSS Variables originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.


Print Share Comment Cite Upload Translate
APA
Geoff Graham | Sciencx (2024-03-29T10:26:38+00:00) » Interpolating Numeric CSS Variables. Retrieved from https://www.scien.cx/2022/08/30/interpolating-numeric-css-variables/.
MLA
" » Interpolating Numeric CSS Variables." Geoff Graham | Sciencx - Tuesday August 30, 2022, https://www.scien.cx/2022/08/30/interpolating-numeric-css-variables/
HARVARD
Geoff Graham | Sciencx Tuesday August 30, 2022 » Interpolating Numeric CSS Variables., viewed 2024-03-29T10:26:38+00:00,<https://www.scien.cx/2022/08/30/interpolating-numeric-css-variables/>
VANCOUVER
Geoff Graham | Sciencx - » Interpolating Numeric CSS Variables. [Internet]. [Accessed 2024-03-29T10:26:38+00:00]. Available from: https://www.scien.cx/2022/08/30/interpolating-numeric-css-variables/
CHICAGO
" » Interpolating Numeric CSS Variables." Geoff Graham | Sciencx - Accessed 2024-03-29T10:26:38+00:00. https://www.scien.cx/2022/08/30/interpolating-numeric-css-variables/
IEEE
" » Interpolating Numeric CSS Variables." Geoff Graham | Sciencx [Online]. Available: https://www.scien.cx/2022/08/30/interpolating-numeric-css-variables/. [Accessed: 2024-03-29T10:26:38+00:00]
rf:citation
» Interpolating Numeric CSS Variables | Geoff Graham | Sciencx | https://www.scien.cx/2022/08/30/interpolating-numeric-css-variables/ | 2024-03-29T10:26:38+00:00
https://github.com/addpipe/simple-recorderjs-demo