Почему CSS-переменные раньше не анимировались?

Многие пытаются сделать так:
.box {
transition: --angle .3s;
}

Но обычная CSS-переменная — это просто строка. Браузер не знает, как плавно перейти от 0deg к 180deg, поэтому анимация не работает.

Регистрируем переменную через @property.
@property --angle {
syntax: "";
}

Теперь браузер знает тип значения и умеет интерполировать его.

Остаётся использовать переменную как обычно.
.box {
transform: rotate(var(--angle));
}

И менять её значение.
.box:hover {
--angle: 180deg;
}

Теперь поворот происходит плавно без JS.

🔥 @property превращает CSS-переменные из обычных строк в типизированные значения, которые можно валидировать и анимировать.

📣 Code Ready | #совет