Vi kan skapa variabler i CSS ganska enkelt:
:root {
--scale: 1;
}Och vi kan deklarera dem på vilket element som helst:
.thing {
transform: scale(--scale);
}Ännu bättre för ett exempel som detta är att tillämpa variabeln på en användarinteraktion, säg :hover:
:root {
--scale: 1;
}
.thing {
height: 100px;
transform: scale(--scale);
width: 100px;
}
.thing:hover {
--scale: 3;
}Men om vi ville använda den variabeln i en animation... nada.
:root {
--scale: 1;
}
@keyframes scale {
from { --scale: 0; }
to { --scale: 3; }
}
/* Nope! */
.thing {
animation: scale .25s ease-in;
height: 100px;
width: 100px;
}Det beror på att variabeln känns igen som en sträng och vad vi behöver är ett tal som kan interpoleras mellan två numeriska värden. Det är där vi kan ringa @property för att inte bara registrera variabeln som en anpassad egenskap, utan definiera dess syntax som ett tal:
@property --scale {
syntax: "<number>";
initial-value: 1;
inherits: true;
}Nu får vi animationen!
Du kommer att vilja kontrollera webbläsarstöd eftersom @property har bara landat i Chrome (som börjar i version 85) när detta skrivs. Och om du hoppas kunna nosa på det med @supports, vi har för närvarande otur eftersom det inte accepterar at-regler som värden... ännu. Det kommer att ändras en gång at-rule()blir en riktig sak.
