Wir können ziemlich einfach Variablen in CSS erstellen:
:root {
--scale: 1;
}Und wir können sie für jedes Element deklarieren:
.thing {
transform: scale(--scale);
}Noch besser für ein Beispiel wie dieses ist es, die Variable beispielsweise auf eine Benutzerinteraktion anzuwenden :hover:
:root {
--scale: 1;
}
.thing {
height: 100px;
transform: scale(--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 Zeichenfolge erkannt wird und wir eine Zahl benötigen, die zwischen zwei numerischen Werten interpoliert werden kann. Da können wir ansetzen @property 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!
Du wirst wollen Browserunterstützung prüfen da @property ist nur in Chrome gelandet (ab in Version 85) zum Zeitpunkt dieses Schreibens. Und wenn Sie hoffen, es mit zu erschnüffeln @supports, wir haben derzeit kein Glück, weil es keine at-Regeln als Werte akzeptiert ... noch nicht. Das wird sich einmal ändern at-rule()wird zur Realität.
