Начало распродаж · Скидка на доставку · Поступление новой коллекции

BELAYA KASKA / FEATURE

designАвтор: Пуск‑Медиа (импорт)Просмотры: 3

@property: анимируемые design tokens без Sass-переменных

Регистрация `--brand-hue` с типом `<number>` и плавные переходы custom properties.

Изображение статьи: @property: анимируемые design tokens без Sass-переменных

At-rule @property описывает кастомное свойство с синтаксисом, наследованием и initial-value — браузер может интерполировать его в @keyframes и transition.

Удобно для анимации hue/lightness в OKLCH-токенах без отдельного JS.

- [@property — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) — syntax, inherits, initial-value.

- [CSS Houdini @property — web.dev](https://web.dev/articles/at-property-basics) — Примеры анимации переменных.

---

## Ограничения

Не все свойства можно зарегистрировать — сложные shorthand лучше оставить статичными.

Документируйте зарегистрированные properties в UI-kit README.

#CSS#токены#анимация

Мы используем обязательные cookie для работы сайта (корзина, вход, оформление заказа) и необязательные — для аналитики и маркетинга. Вы можете принять все, отклонить необязательные или настроить категории. Подробнее в политике cookies.