Анимация на сайте - это инструмент объяснения, а не украшение. Хорошее движение отвечает на вопросы посетителя: что сейчас произошло, куда делся этот блок, работает ли кнопка вообще. Плохое движение задаёт эти вопросы само и заставляет ждать.
Где анимация действительно помогает
Отклик на действие - самый полезный случай. Кнопка слегка меняется при наведении и нажатии, поле формы подсвечивается при фокусе, добавленный в корзину товар коротко подлетает к иконке корзины. Это подтверждает, что сайт услышал клик, и снимает главное сомнение мобильных пользователей: нажалось или нет.
Переходы между состояниями - второй полезный случай. Когда открывается меню, разворачивается блок вопросов или появляется модальное окно, плавный переход показывает связь между тем, что было, и тем, что стало. Резкое появление элемента заставляет мозг заново разбираться в макете.
Индикация ожидания - третий. Если после нажатия кнопки что-то происходит дольше секунды, нужен видимый признак работы: спиннер, скелетон, прогресс. Иначе человек нажимает ещё раз, и магазин получает дублирующийся заказ.
Где анимация мешает
- Появление блоков при прокрутке, из-за которого текст читается рывками
- Автоматические карусели, переключающиеся до того, как слайд дочитали
- Параллакс на всю высоту экрана, отодвигающий содержание вниз
- Тяжёлые видеофоны в шапке, съедающие мобильный трафик
- Анимация, задерживающая появление главной информации на первом экране
Отдельно про появление при прокрутке. Эффект стал стандартом по умолчанию, но у него есть цена: пока блок не проявился, его нет для чтения. Человек, быстро листающий страницу в поисках цены, видит пустоту и уходит. Если оставляете эффект, делайте его коротким и без задержек между элементами списка.
Практические правила
Длительность - от 150 до 300 миллисекунд для большинства переходов. Меньше 100 глаз не замечает, больше 400 воспринимается как тормоза сайта. Крупные элементы могут двигаться чуть дольше мелких, но не сильно.
Анимируйте свойства, которые браузер умеет обрабатывать быстро: перемещение и прозрачность. Анимация ширины, высоты или отступов заставляет браузер пересчитывать раскладку страницы на каждом кадре, и на недорогих телефонах это выглядит рвано.
Обязательно учитывайте системную настройку уменьшения движения. Часть людей включает её из-за укачивания и мигреней, и для них анимации нужно отключать или сводить к простому изменению прозрачности. Это делается одним медиазапросом и относится к базовой доступности.
Проверяйте результат не на своём рабочем компьютере, а на среднем телефоне трёхлетней давности при обычном мобильном интернете. Именно так сайт видит значительная часть посетителей. Если анимация там мешает добраться до цены и кнопки заказа, от неё стоит отказаться, какой бы эффектной она ни была на большом экране.