Изменится - CSS-хитрости | CSS Альманах 2025

will-changeСвойство в CSS оптимизирует анимацию, позволяя браузер знать , какие свойства и элементы только собираемся манипулировать, потенциально увеличивая производительность этой конкретной операции.

Это свойство имеет четыре значения:

auto: будут применены стандартные оптимизации браузера.
scroll-position: указывает, что позиция прокрутки элемента будет анимирована когда-нибудь в ближайшем будущем, поэтому браузер подготовится к содержанию, которое не отображается в окне прокрутки элемента.
contents: ожидается, что содержимое элемента изменится, поэтому браузер не будет кэшировать содержимое этого элемента.
: любое определяемое пользователем свойство, такое как transformили, к opacityкоторому мы хотим will-changeприменить.

Мы можем сообщить браузеру, что скоро произойдет изменение transformсвойства, следующим образом:

.element ( will-change: transform; )

Или, если мы хотим объявить несколько значений, мы можем использовать список, разделенный запятыми, например:

.element ( will-change: transform, opacity; )

Однако важно не злоупотреблять этим will-changeсвойством, так как это может фактически снизить производительность страницы (обратите внимание, что allдля этого свойства нет значения по уважительной причине). В результате MDN рекомендует использовать свойство в качестве последнего средства для устранения существующих проблем с производительностью, а не тех, которые, как вы ожидаете, могут произойти. И при его использовании рекомендуется переключать will-changeнепосредственно перед изменением элемента или свойства, а затем снова отключать его вскоре после завершения процесса.

Поддержка браузера

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.