Ми можемо створювати змінні в 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()стає справжньою річчю.
