Interpolação de variáveis ​​CSS numéricas

Podemos criar variáveis ​​em CSS com bastante facilidade:

:root {
  --scale: 1;
}

E podemos declará-los em qualquer elemento:

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

Melhor ainda para um exemplo como este é aplicar a variável em uma interação do usuário, digamos :hover:

:root {
  --scale: 1;
}

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

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

Mas se quiséssemos usar essa variável em uma animação… nada.

:root {
  --scale: 1;
}

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

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

Isso porque a variável é reconhecida como uma string e o que precisamos é de um número que possa ser interpolado entre dois valores numéricos. É aí que podemos ligar @property para não apenas registrar a variável como uma propriedade customizada, mas também definir sua sintaxe como um número:

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

Agora temos a animação!

Você vai querer verifique o suporte do navegador desde @property só chegou ao Chrome (começando em versão 85) no momento desta redação. E se você espera farejá-lo com @supports, estamos sem sorte porque ele não aceita regras como valores... ainda. Isso vai mudar uma vez at-rule()se torna uma coisa real.