Interpolar variables CSS numéricas | trucos CSS

Podemos crear variables en CSS con bastante facilidad:

:root {
  --scale: 1;
}

Y podemos declararlos en cada elemento:

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

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

:root {
  --scale: 1;
}

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

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

Pero si queremos usar esta variable en una animación… no.

:root {
  --scale: 1;
}

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

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

Esto se debe a que la variable se reconoce como una cadena y lo que necesitamos es un número que se pueda interpolar entre dos valores numéricos. Aquí es donde podemos llamar @property no solo registra la variable como una propiedad personalizada, sino que también define su sintaxis como un número:

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

¡Ahora tenemos la animación!

Querrás verifique el soporte del navegador de @property aterrizó solo en Chrome (a partir de versión 85) en el momento de escribir. Y si esperas olfatear con @supportsactualmente no tenemos suerte porque no acepta las reglas at como valores… todavía. Esto cambiará una vez at-rule()se convierte en algo real.