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

will-change

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

Синтаксис

will-change: property;

Значения

Параметр	Тип	Описание
property	ident	Что изменится: `transform`, `opacity`.
auto	keyword	Без подсказки (по умолчанию).

Примеры

Индикатор загрузки с подсказкой:

<style>
  @keyframes spin { to { rotate: 360deg; } }
  .loader {
    width: 40px; height: 40px;
    border: 4px solid lightgray; border-top-color: royalblue; border-radius: 50%;
    will-change: rotate;
    animation: spin 1s linear infinite;
  }
</style>
 
<div class="loader"></div>

Примечания

Это крайнее средство для анимаций, которые дёргаются, а не ускоритель для всего подряд. Каждая подсказка стоит памяти, поэтому не ставьте её многим элементам и «на всякий случай».

См. также

transform — Сдвигает, поворачивает, масштабирует или наклоняет элемент, не влияя на раскладку вокруг.
animation — Запускает на элементе анимацию из `@keyframes`.
opacity — Прозрачность всего элемента вместе с содержимым.
content-visibility — Позволяет браузеру не раскладывать и не рисовать содержимое элемента, пока он за пределами экрана, — дешёвое ускорение длинных страниц.

В учебнике

Анимации — Анимации CSS — правило @keyframes, свойство animation, повторы и направление, ключевые кадры в процентах, fill-mode и prefers-reduced-motion.

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