Не все CSS-анимации одинаково легки для браузера. Изменение transform или opacity браузер часто может обработать почти без участия центрального процессора, тогда как анимация width, height или изменение позиции через top и left иногда требует пересчёта раскладки всей страницы на каждом кадре.
Такой пересчёт называют reflow, и если он происходит каждый кадр анимации, это заметно нагружает браузер, особенно на не самых мощных устройствах вроде бюджетных телефонов. Именно поэтому опытные верстальщики стараются анимировать преимущественно transform и opacity, а не свойства, влияющие на геометрию страницы.
Свойство will-change — подсказка браузеру заранее подготовиться к изменению определённого свойства на конкретном элементе, например создать для него отдельный слой отрисовки. Это может заметно улучшить плавность анимации, но злоупотреблять этим свойством не стоит.
Если пометить will-change слишком много элементов на странице, браузер попытается заранее подготовить отдельные слои для каждого из них, что само по себе расходует память и ресурсы, иногда даже больше, чем экономится на самой анимации. Разумнее применять will-change точечно, непосредственно перед началом конкретной анимации.
Инструменты разработчика в браузере умеют показывать частоту кадров и подсвечивать области, которые перерисовываются слишком часто — это удобный способ проверить, не создаёт ли конкретная анимация заметных подтормаживаний ещё на этапе разработки, а не после жалоб пользователей.
Для большинства обычных сайтов с не самыми интенсивными анимациями вопрос производительности редко становится критичным, но для сайтов с активной анимированной графикой или множеством одновременных эффектов эти детали начинают ощутимо влиять на общее впечатление.
Подробнее о том, какие свойства дешевле анимировать и как устроен рендеринг страницы, рассказано в материале про производительность анимаций на web.dev.
