Interpolating Numeric CSS Variables

Wir können Variablen in CSS ziemlich einfach erstellen

:root {
  --scale: 1;
}

Und wir können sie auf jedem Element deklarieren

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

Noch besser für ein Beispiel wie dieses ist, die Variable bei einer Benutzerinteraktion anzuwenden, z. B. :hover

:root {
  --scale: 1;
}

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

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

Aber wenn wir diese Variable in einer Animation verwenden wollten... nada.

:root {
  --scale: 1;
}

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

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

Das liegt daran, dass die Variable als Zeichenkette erkannt wird und wir eine Zahl benötigen, die zwischen zwei numerischen Werten interpoliert werden kann. Hier können wir @property aufrufen, um die Variable nicht nur als benutzerdefinierte Eigenschaft zu registrieren, sondern ihre Syntax als Zahl zu definieren

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

Jetzt bekommen wir die Animation!

Sie werden die Browserunterstützung überprüfen wollen, da @property zum Zeitpunkt der Erstellung dieses Textes nur in Chrome (ab Version 85) eingeführt wurde. Und wenn Sie hoffen, sie mit @supports zu erkennen, haben wir derzeit Pech, da sie keine At-Rules als Werte akzeptiert... noch nicht. Das wird sich ändern, sobald at-rule() zu etwas Echtem wird.