CSS свойство will-change

❮ Назад Вперед ❯

Свойство will-change сообщает браузеру об ожидаемом изменении элемента. Необходимо настроить оптимизации перед изменением элемента.

Свойство will-change раньше имело название will-animate.

Свойство will-change позволяет браузеру изменить положение прокрутки элемента, контент и не менее одного значения CSS свойств. Но для многих свойств оно не будет иметь эффекта.

Значения должны быть разделены запятыми. Но не применяйте свойство will-change для большого количества элементов. Оно не может быть значениями unset, initial, inherit, will-change, auto, scroll-position или contents.

Свойство will-change также влияет на визуальное отображение элемента.

Данное свойство должно быть использовано с осторожностью. Разные браузеры используют свойство по-разному, а если использовать это свойство слишком много, оно будет проигнорировано.

Значение по умолчанию	auto
Применяется	Ко всем элементам.
Наследуется	Нет.
Анимируемое	Нет.
Версия	CSS1
DOM синтаксис	object.style.willChange = "scroll-position";

Синтаксис

will-change: auto | scroll-position | contents | <custom-ident> | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .circle {
      width: 50px;
      height: 50px;
      transform: translate(50px, 0px);
      border-radius: 30px;
      }
      .circle.blue {
      background: #1c87c9;
      will-change: transform;
      }
      .circle.green {
      background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства will-change</h2>
    <div class="circle green"></div>
    <div class="circle blue"></div>
    <div class="circle green"></div>
    <div class="circle blue"></div>
    <div class="circle green"></div>
    <script>
      var circles= document.getElementsByClassName("circle blue");
      function update(t) {
        for (var i = 0; i < circles.length; i++) {
          var xpos = Math.sin(t/1000 + 1000*i) * 50 + 50;
          circles[i].style.transform = "translate(" + xpos + "px, 0px)";
        }
        window.requestAnimationFrame(update);
      }
      update();
    </script>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
auto	Применяется стандартная оптимизация браузера.
scroll-position	Указывает, что положение прокрутки должно быть анимировано в будущем.
contents	Указывает, что контент элемента должно быть анимировано в будущем.
<custom-ident>	Ожидается изменение или анимирование свойства с указанным названием элемента.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента