Interpolación de variables CSS numéricas

Podemos hacer variables en CSS bastante fácilmente:

:root {
  --scale: 1;
}

Y podemos declararlos en cualquier elemento:

.thing {
  transform: scale(--scale);
}

Incluso mejor para un ejemplo como este es aplicar la variable en una interacción del usuario, digamos :hover:

:root {
  --scale: 1;
}

.thing {
  height: 100px;
  transform: scale(--scale);
  width: 100px;
}

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

Pero si quisiéramos usar esa variable en una animación… nada.

:root {
  --scale: 1;
}

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

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

Eso es porque la variable se reconoce como una cadena y lo que necesitamos es un número que se pueda interpolar entre dos valores numéricos. Ahí es donde podemos llamar @property no solo registrar la variable como una propiedad personalizada, sino también definir su sintaxis como un número:

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

¡Ahora tenemos la animación!

vas a querer comprobar el soporte del navegador desde @property solo ha aterrizado en Chrome (comenzando en Versión 85) a partir de este escrito. Y si esperas olfatear con @supports, actualmente no tenemos suerte porque no acepta las reglas at como valores... todavía. Eso cambiará una vez at-rule()se convierte en algo real.