От автора: Если вы много раз применяли анимацию, используя только средства CSS, то вы наверняка заметили небольшое мерцание, возникающее в момент анимирования элемента, и вы могли даже воспользоваться хаком, чтобы избавиться от него.
К счастью, больше нет необходимости прибегать к хакам, т.к. у нас появилось новое CSS-свойство, которое поможет нам с обработкой сложной анимации и переходов.
Почему возникает мерцание?
Эффект анимации осуществляется за счет средств визуализации движка браузера, который обычно работает намного медленнее, чем компьютерный графический процессор (GPU). Вот почему иногда, даже если вы можете играть в топовые игры на вашем компьютере, вы все равно заметите небольшое мерцание при просмотре веб-сайтов, на которых применена сложная CSS-анимация.
А также данная проблема неодинаково проявляется в разных браузерах.
Браузерная поддержка свойства will-change
На момент написания статьи данное свойство поддерживается только, так называемыми, «ночными версиями» (nightly versions) браузеров Chrome, Opera и Firefox. Однако, судя по количеству ночных версий браузеров, поддерживающих данное свойство, пройдет не так много времени, и оно станет поддерживаться и основными версиями.
Свойство will-change
Это новое свойство позволяет вам проинформировать браузер пользователя о том, какие изменения вы собираетесь произвести с элементом, чтобы браузер смог лучше подготовиться и оптимизировать элемент перед непосредственной трансформацией. Благодаря этому мерцание исчезает, и веб-страница становится более отзывчивой к действиям пользователя.
Это также делает браузер более осведомленным, и позволяет ему использовать ресурсы только при необходимости, создавая слои для 3D трансформаций до их применения и делая плавной анимацию на стороне клиента. Предположим, что вы хотите применить к конкретному элементу, при наведении на него мышью, такую 3D трансформацию, как вращение (rotate). До того, как к элементу будет применена анимация, укажите следующее:
|
1 |
will-change: transform; |
Конечно, если вы планируете изменить больше одного CSS-свойства, вы также можете их перечислить, разделив запятыми:
|
1 |
will-change: transform, top; |
Однако данное свойство нужно применять с осторожностью, убедившись в том, что браузер не производит оптимизацию элементов, не нуждающихся в этом. Например, вам никогда не следует писать следующим образом:
|
1 2 3 |
* { will-change: all; } |
Возможные значения
У свойства will-change есть несколько возможных значений:
Auto – это значение просто сообщает браузеру о том, что не нужно ничего менять и оптимизировать.
scroll-position – это значение указывает на то, что конечный элемент изменит своей положение при скроллинге страницы.
contents – указывая данное значение, вы сообщаете браузеру о том, что содержимое конечного элемента будет впоследствии изменено.
А также в качестве значения вы можете указать одно или несколько свойств, которые вы планируете изменить, например, opacity или transform.
Заключение
CSS3 включает в себя большое количество классных эффектов, но при этом не учитываются определенные ограничения устройств, которые мы используем. Свойство will-change – это значительный шаг в сторону исправления данной ошибки.
Автор: Sara Vieira
Источник: //www.developerdrive.com/
Редакция: Команда webformyself.
