Vi kan lage variabler i CSS ganske enkelt:
:root {
--scale: 1;
}
Og vi kan erklære dem på et hvilket som helst element:
.thing {
transform: scale(--scale);
}
Enda bedre for et eksempel som dette er å bruke variabelen på en brukerinteraksjon, for eksempel :hover
:
:root {
--scale: 1;
}
.thing {
height: 100px;
transform: scale(--scale);
width: 100px;
}
.thing:hover {
--scale: 3;
}
Men hvis vi ønsket å bruke den variabelen i en animasjon... nada.
:root {
--scale: 1;
}
@keyframes scale {
from { --scale: 0; }
to { --scale: 3; }
}
/* Nope! */
.thing {
animation: scale .25s ease-in;
height: 100px;
width: 100px;
}
Det er fordi variabelen gjenkjennes som en streng, og det vi trenger er et tall som kan interpoleres mellom to numeriske verdier. Det er der vi kan ringe @property
å ikke bare registrere variabelen som en egendefinert egenskap, men definere dens syntaks som et tall:
@property --scale {
syntax: "<number>";
initial-value: 1;
inherits: true;
}
Nå får vi animasjonen!
Du kommer til å ville sjekk nettleserstøtten siden @property
har bare landet i Chrome (starter i versjon 85) når dette skrives. Og hvis du håper å snuse det ut med @supports
, vi er for øyeblikket uheldige fordi den ikke godtar at-regler som verdier … ennå. Det vil endre seg en gang at-rule()
blir en ekte ting.