We kunnen vrij eenvoudig variabelen maken in CSS:
:root {
--scale: 1;
}En we kunnen ze op elk element declareren:
.thing {
transform: scale(--scale);
}Nog beter voor een voorbeeld als dit is het toepassen van de variabele op een gebruikersinteractie, zeg :hover:
:root {
--scale: 1;
}
.thing {
height: 100px;
transform: scale(--scale);
width: 100px;
}
.thing:hover {
--scale: 3;
}Maar als we die variabele in een animatie willen gebruiken... nada.
:root {
--scale: 1;
}
@keyframes scale {
from { --scale: 0; }
to { --scale: 3; }
}
/* Nope! */
.thing {
animation: scale .25s ease-in;
height: 100px;
width: 100px;
}Dat komt omdat de variabele wordt herkend als een tekenreeks en wat we nodig hebben is een getal dat kan worden geïnterpoleerd tussen twee numerieke waarden. Daar kunnen we een beroep op doen @property om de variabele niet alleen als een aangepaste eigenschap te registreren, maar de syntaxis ervan als een getal te definiëren:
@property --scale {
syntax: "<number>";
initial-value: 1;
inherits: true;
}Nu krijgen we de animatie!
Je zult willen controleer browserondersteuning sinds @property is alleen in Chrome geland (vanaf in versie 85) op het moment van schrijven. En als je hoopt het op te snuiven met @supports, we hebben momenteel pech omdat het geen regels accepteert als waarden... nog niet. Dat zal een keer veranderen at-rule()wordt een echt ding.
