Мы можем довольно легко создавать переменные в CSS:
:root {
--scale: 1;
}И мы можем объявить их для любого элемента:
.thing {
transform: scale(--scale);
}Еще лучше для примера, подобного этому, применить переменную к взаимодействию с пользователем, скажем :hover:
:root {
--scale: 1;
}
.thing {
height: 100px;
transform: scale(--scale);
width: 100px;
}
.thing:hover {
--scale: 3;
}Но если бы мы хотели использовать эту переменную в анимации… нет.
:root {
--scale: 1;
}
@keyframes scale {
from { --scale: 0; }
to { --scale: 3; }
}
/* Nope! */
.thing {
animation: scale .25s ease-in;
height: 100px;
width: 100px;
}Это потому, что переменная распознается как строка, и нам нужно число, которое можно интерполировать между двумя числовыми значениями. Вот где мы можем позвонить @property чтобы не только зарегистрировать переменную как пользовательское свойство, но и определить ее синтаксис как число:
@property --scale {
syntax: "<number>";
initial-value: 1;
inherits: true;
}Теперь мы получаем анимацию!
ты захочешь проверьте поддержку браузера с @property появился только в Chrome (начиная с версия 85) на момент написания этой статьи. И если вы надеетесь вынюхать это с @supports, в настоящее время нам не повезло, потому что он не принимает at-rules в качестве значений… пока. Это изменится однажды at-rule()становится реальной вещью.
