Як оптимізувати CSS-анімації за допомогою властивості will-change

14

Від автора: Якщо ви багато разів застосовували анімацію, використовуючи тільки засоби CSS, то ви напевно помітили невелике мерехтіння, яке виникає в момент анимирования елемента, і ви могли навіть скористатися хаком, щоб позбутися від нього.

На щастя, більше немає необхідності вдаватися до хакама, т. к. у нас з’явилося нове CSS-властивість, яка допоможе нам з обробкою складної анімації і переходів.

Чому виникає мерехтіння?

Ефект анімації здійснюється за рахунок коштів візуалізації движка браузера, який зазвичай працює набагато повільніше, ніж комп’ютерний графічний процесор (GPU). Ось чому іноді, навіть якщо ви можете грати в топові ігри на вашому комп’ютері, ви все одно побачите невелике мерехтіння при перегляді веб-сайтів, на яких застосована складна CSS-анімація.

А також дана проблема неоднаково проявляється в різних браузерах.

Браузерна підтримка властивості will-change

На момент написання статті дана властивість підтримується тільки, так званими, «нічними версіями» (nightly versions) браузерів Chrome, Opera і Firefox. Однак, судячи з кількості нічних версій браузерів, що підтримують дану властивість, пройде не так багато часу, і воно стане підтримуватися і основними версіями.

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

Це нове властивість дозволяє вам проінформувати браузер користувача про те, які зміни ви збираєтеся зробити з елементом, щоб браузер зміг краще підготуватися і оптимізувати елемент перед безпосередньою трансформацією. Завдяки цьому мерехтіння зникає, і веб-сторінка стає більш чуйною до дій користувача.

Це також робить браузер більш обізнаним, і дозволяє йому використовувати ресурси тільки при необхідності, створюючи шари для 3D трансформацій до їх застосування і роблячи плавну анімацію на стороні клієнта. Припустимо, що ви хочете застосувати до конкретного елементу, при наведенні на нього мишкою, таку 3D трансформацію, як обертання (rotate). До того, як до елементу буде застосована анімація, вкажіть наступне:

will-change: transform;

Звичайно, якщо ви плануєте змінити більше одного CSS-властивості, ви також можете їх перерахувати, розділивши їх комами:

will-change: transform, top;

Однак дана властивість потрібно застосовувати з обережністю, переконавшись в тому, що браузер не виробляє оптимізацію елементів, що не потребують в цьому. Наприклад, вам ніколи не слід писати наступним чином:

* {
will-change: all;
}

Можливі значення

У властивості will-change є кілька можливих значень:

Auto – це значення просто повідомляє браузеру про те, що не потрібно нічого змінювати та оптимізувати.

scroll-position – це значення вказує на те, що кінцевий елемент змінить свого положення при скролінгу сторінок.

contents – вказуючи дане значення, ви повідомляєте браузеру про те, що вміст кінцевого елемента буде згодом змінено.

А також в якості параметра ви можете вказати одну або декілька властивостей, які ви плануєте змінити, наприклад, opacity або transform.

Висновок

CSS3 включає в себе велику кількість класних ефектів, але при цьому не враховуються певні обмеження пристроїв, які ми використовуємо. Властивість will-change – це значний крок у бік виправлення даної помилки.