CSS will-change — підказка браузеру для оптимізації анімації

CSS властивість will-change попереджає браузер, які властивості елемента невдовзі змінюватимуться, щоб він підготувався заздалегідь.

правити

Загальний опис

Браузер може винести елемент на окремий шар графічного прискорювача — і тоді анімація піде плавно, без перемальовування сусідів.

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

правити

Нотатка

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

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

will-change: auto | <property>;

Властивість will-change може отримувати 2 значень:

auto

Без підказок — стандартні оптимізації.

автор: NagarD

правити

property

Назви властивостей через кому: transform, opacity…

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
will-change	36+	36+	9.1+	24+	79+	-

Підтримка: мобільні переглядачі

Переглядач
will-change	36+	yes	yes	9.3+

Приклади

+ запропонувати свій приклад у пісочниці

<div class="slider">Плавний зсув</div>

.slider {
    /* кажемо браузеру: готуйся, я рухатимусь */
    will-change: transform;
    transition: transform .3s;
}

.slider:hover {
    transform: translateX(20px);
}