Верстка, CSS, HTML, SVG

Производительность css анимации на слабых ПК?

Стоит ли добавлять на сайте анимацию? Насколько она влиянет на производительность на слабых телефонов, пк, кофеварок и т. д.?
В основном влияет не сама css-анимация, а та работа которую браузеру приходится из-за нее выполнять. Из этой работы, самая дорогостоящая операция - рефлоу документа, перекомпоновка. Так как браузер старается обеспечить 60 кадров в секунду на анимациях, перестроение элементов и полные перерисовки с этой частотой, могут создать просто адовую нагрузку.
Простой пример: transition свойства margin-top элемента первого уровня вложенности (если он где-нибудь вверху страницы, то все что ниже, будет перекопановано).

Так что, на вопрос "стоит ли добавлять анимации", очевидным ответом будет: конечно стоит, но только если умеешь их готовить. На гуглдев, в веб разделе есть замечательная статья, которая объясняет как это делать (правда, она на инглише, и ориентирована больше на веб-разработчиков, а не новичков/вайтишников... но увы, переводной и новичковый материал в сети это на 99% шлак, так что если заинтересован - придется напрячься. Оно того стоит).
Валерий Калмыков
Валерий Калмыков
64 981
Лучший ответ
Все зависит от самой анимации и как она реализована. В большинстве случае, современные телефоны и компы способны без просадок ее проигрывать. У браузеров есть специальное для этого API
Простая анимация будет работать везде (например fideIn/Out). А вот если сложная с использованием @keyframes тут надо уже тестировать.
Рустам Рустам
Рустам Рустам
7 330
Лёгкую анимацию добавить на сайт можно, но не стоит переусердствовать с анимацией и делать всякие крутые 3D вращения, такие сайты делаются исключительно чтобы похвастаться перед другими.