Властивість CSS will-change

Що таке will-change?

Властивість will-change надає браузеру підказку, що елемент, ймовірно, зміниться, дозволяючи йому налаштувати оптимізації заздалегідь — такі як підвищення елемента до власного шару композитора.

Синтаксис

css

.animated-element {
  will-change: transform;
}

.fading-element {
  will-change: opacity;
}

.moving-element {
  will-change: transform, opacity;
}

Як це працює

Коли браузер знає, що елемент зміниться, він може:

Перемістити елемент на окремий шар GPU (підвищення шару)
Попередньо виділити ресурси для анімації
Уникнути дорогих перерисовок/переміщень під час зміни

Коли використовувати

css

/* ✅ Добре: Застосовувати перед початком анімації */
.card:hover {
  will-change: transform;
}
.card:hover .overlay {
  will-change: opacity;
}

/* ✅ Добре: Застосовувати через JS безпосередньо перед анімацією */
/* element.style.willChange = 'transform'; */
/* Почати анімацію... */
/* Після анімації: element.style.willChange = 'auto'; */

Коли НЕ використовувати

css

/* ❌ Погано: Застосовано до всього */
* { will-change: transform, opacity, scroll-position; }

/* ❌ Погано: Застосовано до занадто багатьох елементів постійно */
.every-single-element { will-change: transform; }

/* ❌ Погано: Застосовано до статичних елементів, які не анімуються */
.static-header { will-change: transform; }

Розгляд продуктивності

Аспект	Деталі
Використання пам'яті	Кожен підвищений шар використовує пам'ять GPU
Надмірне використання	Може знизити продуктивність (більше шарів = більше накладних витрат)
Найкраща практика	Застосовувати безпосередньо перед анімацією, видаляти після
Постійне використання	Тільки для елементів, які дійсно часто анімуються

Найкращі практики

Не застосовувати глобально — тільки до елементів, які дійсно анімуються
Видаляти після анімації — повертати до auto, коли закінчено
Застосовувати заздалегідь — налаштовувати перед початком анімації (наприклад, при наведенні на батьківський елемент)
Не зловживати — кожен шар споживає пам'ять

Шаблон перемикання (JS)

javascript

element.addEventListener('mouseenter', () => {
  element.style.willChange = 'transform';
});

element.addEventListener('transitionend', () => {
  element.style.willChange = 'auto';
});

will-change vs transform: translateZ(0)

Раніше розробники використовували transform: translateZ(0) або translate3d(0,0,0) як "хак" для активації апаратного прискорення. will-change є правильним, призначеним API для цієї мети:

css

/* Старий хак (все ще працює) */
.old-way { transform: translateZ(0); }

/* Сучасний підхід */
.modern-way { will-change: transform; }

Важливо:

will-change є підказкою для оптимізації продуктивності, а не магічним прискоренням. Надмірне використання може насправді погіршити продуктивність. Застосовуйте його вибірково до елементів, які дійсно анімуються, і видаляйте його, коли анімація завершується.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань