Верстка, CSS, HTML, SVG
Производительность css анимации на слабых ПК?
Стоит ли добавлять на сайте анимацию? Насколько она влиянет на производительность на слабых телефонов, пк, кофеварок и т. д.?
В основном влияет не сама css-анимация, а та работа которую браузеру приходится из-за нее выполнять. Из этой работы, самая дорогостоящая операция - рефлоу документа, перекомпоновка. Так как браузер старается обеспечить 60 кадров в секунду на анимациях, перестроение элементов и полные перерисовки с этой частотой, могут создать просто адовую нагрузку.
Простой пример: transition свойства margin-top элемента первого уровня вложенности (если он где-нибудь вверху страницы, то все что ниже, будет перекопановано).
Так что, на вопрос "стоит ли добавлять анимации", очевидным ответом будет: конечно стоит, но только если умеешь их готовить. На гуглдев, в веб разделе есть замечательная статья, которая объясняет как это делать (правда, она на инглише, и ориентирована больше на веб-разработчиков, а не новичков/вайтишников... но увы, переводной и новичковый материал в сети это на 99% шлак, так что если заинтересован - придется напрячься. Оно того стоит).
Простой пример: transition свойства margin-top элемента первого уровня вложенности (если он где-нибудь вверху страницы, то все что ниже, будет перекопановано).
Так что, на вопрос "стоит ли добавлять анимации", очевидным ответом будет: конечно стоит, но только если умеешь их готовить. На гуглдев, в веб разделе есть замечательная статья, которая объясняет как это делать (правда, она на инглише, и ориентирована больше на веб-разработчиков, а не новичков/вайтишников... но увы, переводной и новичковый материал в сети это на 99% шлак, так что если заинтересован - придется напрячься. Оно того стоит).
Все зависит от самой анимации и как она реализована. В большинстве случае, современные телефоны и компы способны без просадок ее проигрывать. У браузеров есть специальное для этого API
Простая анимация будет работать везде (например fideIn/Out). А вот если сложная с использованием @keyframes тут надо уже тестировать.
Лёгкую анимацию добавить на сайт можно, но не стоит переусердствовать с анимацией и делать всякие крутые 3D вращения, такие сайты делаются исключительно чтобы похвастаться перед другими.
Похожие вопросы
- Не могу выучить HTML+CSS+jQuerry. Что посоветуете?
- Поможет ли вёрстка сайтов закрепить новичку знания HTML и CSS? Или лучше вёрсткой заниматься когда всё знаешь?
- поясните пожалуйста по html и css
- Что учить после начального курса css и html? ПОДРОБНЕЕ НИЖЕ!!!
- Выучил основы css и html но я нашел какота css gird flex flexbox bootstrap стоит это все учить или нет помогите
- Помогите советом в изучение HTML и CSS?
- Как продолжить учить html и css после codeacademy?
- Про теорию HTML CSS.(подробней в описании)
- Что нужно знать стажеру HTML/CSS?
- Вопрос к тем, кто программирует сайты через HTML и CSS или знает, что это такое. Объясните пожалуйста (вопрос в описании