Свойство box-shadow в css: как анимировать без потери производительности

Свойство box-shadow в css: как анимировать без потери производительности

От автора: как анимировать CSS свойство box-shadow таким образом, чтобы объект на каждом кадре не отрисовывался заново, а также без потери в производительности страницы? Если коротко, то никак. Анимация свойства box-shadow сильно влияет на производительность.

Тем не менее, есть более простой способ имитировать этот эффект с минимальной перерисовкой объекта и с 60FPS: анимация свойства opacity на псевдоклассе.

Демо

Посмотрите на демо и сравните две разных техники, которые мы сегодня разберем. Если вы не видите разницы, то мы добились того, чего хотели. Разница только в том, как мы назначаем и анимируем тень объекта. Слева мы анимируем свойство box-shadow по событию hover, а справа мы добавляем псевдокласс, к нему добавляем тень, а затем анимируем свойство opacity данного элемента.

Если вы воспользуетесь панелью разработчика и наведете курсор мыши на одно из двух демо, то вы увидите что-то похожее на (зеленые столбцы это перерисовка, чем меньше, тем лучше):

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Четко видно, что по сравнению с карточкой справа (анимация свойства opacity псевдокласса) перерисовок больше при наведении на карточку слева (анимация свойства box-shadow).

Почему же мы наблюдаем такой эффект? В CSS есть несколько свойств, которые можно анимировать без вызова постоянной перерисовки объекта на каждом кадре, и это opacity и transform. Изменяя только эти два свойства во время анимации, мы минимизируем количество перерисовок объекта (тем самым уменьшаем работу браузеру). Разница между подходами существенна, напишем стили:

В примере с большей производительностью два слоя: один для блока, другой для тени. Анимации подвергается только слой для тени и конкретно свойство opacity.

Принцип работы

Давайте разберем, как создать 3D эффект для карточки из демо выше. Первый шаг это задать тень псевдоклассу, как мы делали выше. Также добавим весь необходимый для создания карточки код:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Заметьте, что мы добавили свойство transition как к .box, так и к .box::after, потому что мы будем анимировать оба элемента: transform для .box и opacity для .box::after. У нас получился белый квадрат с тоненькой тенью box-shadow. Более четкая тень элемента .box::after полностью скрыта, с квадратом нельзя никак взаимодействовать.

Для создания эффекта, как в демо, нам всего лишь требуется увеличивать .box при наведении мыши и плавно показывать псевдокласс с его тенью:

Вот и все! Наведите курсор мыши, чтобы увидеть эффект. В итоге мы получаем вот такой CSS код с добавлением всех вендорных префиксов и парочки пользовательских функций анимации:

Кода намного больше, чем, если просто анимировать свойство box-shadow. Так зачем же так беспокоиться? Даже если ваш компьютер обрабатывает анимацию свойства box-shadow без видимых трудностей, не факт, что ваш телефон справится. Даже компьютеры начнут подтормаживать при обработке более сложной анимации.

Используйте свойство transition только со свойствами transform и opacity, и вы получите максимально возможную производительность, а значит, и самый лучший пользовательский опыт.

Автор: Tobias

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

Получить

Метки:

Похожие статьи:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree