Interpolating Numeric CSS Variables | CSS-Tips

We are able to make variables in CSS fairly simply:

:root {
  --scale: 1;
}

And we will declare them on any ingredient:

.factor {
  rework: scale(--scale);
}

Even higher for an instance like that is making use of the variable on a consumer interplay, say :hover:

:root {
  --scale: 1;
}

.factor {
  top: 100px;
  rework: scale(--scale);
  width: 100px;
}

.factor:hover {
  --scale: 3;
}

But when we wished to make use of that variable in an animation… nada.

:root {
  --scale: 1;
}

@keyframes scale {
  from { --scale: 0; }
  to { --scale: 3; }
}

/* Nope! */
.factor {
  animation: scale .25s ease-in;
  top: 100px;
  width: 100px;
}

That’s as a result of the variable is acknowledged as a string and what we’d like is a quantity that may be interpolated between two numeric values. That’s the place we will name on @property to not solely register the variable as a customized property, however outline its syntax as a quantity:

@property --scale {
  syntax: "<quantity>";
  initial-value: 1;
  inherits: true;
}

Now we get the animation!

You’re going to wish to verify browser assist since @property has solely landed in Chrome (beginning in model 85) as of this writing. And when you’re hoping to smell it out with @helps, we’re at present out of luck as a result of it doesn’t settle for at-rules as values… but. That may change as soon as at-rule()turns into an actual factor.