Справочник HTML & CSS

@property

Регистрирует пользовательское свойство с типом, чтобы браузер мог его анимировать и проверять значение.

Синтаксис

@property --name { syntax: "<type>"; inherits: false; initial-value: …; }

Параметры

Параметр	Тип	Описание
syntax	string	Тип в кавычках и угловых скобках: `"<color>"`, `"<length>"`, `"<angle>"`.
inherits	boolean	Наследуется ли свойство.
initial-value	value	Значение, если оно не задано.

Примеры

Анимированное кольцо прогресса — без @property градиент переключался бы скачком, а не плавно:

<style>
  @property --angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
  }
  .ring {
    width: 100px; height: 100px; border-radius: 50%;
    background: conic-gradient(teal var(--angle), lightgray 0);
    transition: --angle 1s;
  }
  .ring:hover { --angle: 270deg; }
</style>
 
<div class="ring"></div>
<p>Hover over the ring.</p>

Примечания

Обычные пользовательские свойства для браузера — просто текст, поэтому анимировать их нельзя. Регистрация даёт им тип. Поддерживается всеми актуальными браузерами с 2024 года.

См. также

var() — Подставляет значение пользовательского свойства (переменной CSS).
transition — Плавно анимирует изменение свойства от старого значения к новому.
linear-gradient() — Плавный переход между цветами вдоль прямой — используется как фоновая картинка.

В учебнике

Функции CSS — Вычисления прямо в CSS — calc(), min(), max() и clamp(), смешивание единиц, плавные размеры и функции вместе с переменными.

Спасибо, что читаете!