Как оптимизировать CSS-анимацию с помощью свойства will-change

Как оптимизировать CSS-анимацию с помощью свойства will-change

От автора: Если вы много раз применяли анимацию, используя только средства 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 – это значительный шаг в сторону исправления данной ошибки.

Автор: Sara Vieira

Источник: http://www.developerdrive.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree