Анимация на сайте оправдана, когда объясняет пользователю, что произошло: кнопка нажалась, блок раскрылся, товар добавился в корзину. Всё остальное движение соревнуется за внимание с текстом и ценами, и обычно выигрывает не в пользу заявок.
Мы в студии Сайты2.рф делаем анимации на каждом проекте и регулярно снимаем их с чужих сайтов, когда разбираем причины медленной загрузки. Ниже - что работает, что мешает и как проверить, не переборщили ли вы.
Четыре типа анимации по пользе
Обратная связь. Кнопка меняет вид при нажатии, поле подсвечивается при фокусе, появляется индикатор загрузки. Это не украшение, а сообщение "система вас услышала". Отсутствие такой анимации приводит к повторным нажатиям и дублям заявок.
Объяснение изменений. Меню выезжает, блок раскрывается, модальное окно появляется. Движение показывает, откуда взялся новый элемент, и человек не теряет ориентацию.
Привлечение внимания. Лёгкое покачивание кнопки, пульсация значка корзины. Работает в малых дозах, при постоянном применении перестаёт замечаться.
Декорация. Параллакс, плавающие фигуры, длинные сцены при прокрутке. Влияет на впечатление и почти никогда на заявки. Уместна в проектах, где впечатление и есть продукт: портфолио, продвижение мероприятия, презентация бренда.
Первые два типа стоит делать всегда. Третий дозированно. Четвёртый - по решению, с пониманием цены.
Сколько времени должна занимать анимация
Ориентиры, которые дают ощущение отзывчивости:
- Обратная связь на нажатие: 80-120 миллисекунд.
- Раскрытие блока, появление меню: 150-250 миллисекунд.
- Появление модального окна: 200-300 миллисекунд.
- Появление блока при прокрутке: до 300 миллисекунд.
- Длинные декоративные сцены: осознанное решение, но не в критичных местах пути к заявке.
Правило простое: чем чаще пользователь видит анимацию, тем короче она должна быть. Полусекундное раскрытие пункта меню выглядит красиво в первый раз и мешает на десятый.
Появление блоков при прокрутке: как не сломать сайт
Самый популярный эффект и самая частая проблема.
Реализация обычно такая: блоки скрыты стилями, скрипт замечает попадание в область видимости и добавляет класс, блок появляется. Что ломается:
Пустая страница без скриптов. Если блоки скрыты в CSS безусловно, а скрипт не выполнился (ошибка, блокировщик, медленная сеть), посетитель видит пустоту. Правильно скрывать только тогда, когда скрипты работают: скрипт ставит на корневой элемент документа отметку, и стили скрытия применяются лишь при её наличии.
Пропуск контента при быстрой прокрутке. Человек проматывает страницу вниз, блоки не успевают появиться. Лечится тем, что анимация запускается заранее, до попадания блока в центр экрана.
Сдвиг вёрстки. Если блок появляется с изменением высоты, страница дёргается, и портится показатель стабильности макета. Анимировать нужно прозрачность и небольшое смещение, а не высоту.
Проблемы при снятии скриншотов и в автотестах. Мелочь, но при проверке вёрстки скрытые блоки выглядят как пропавшие. Мы это учитываем при тестировании: перед снимком экрана раскрываем всё принудительно.
Что анимировать технически безопасно
Свойства, которые браузер обрабатывает дёшево: прозрачность и преобразования (смещение, масштаб, поворот). Такие анимации идут плавно даже на слабых устройствах.
Свойства, которые вызывают перерасчёт вёрстки и подтормаживают: высота, ширина, отступы, положение через свойства смещения от края. Раскрытие блока через изменение высоты - типичная причина дёрганой анимации на телефоне.
Практический приём для раскрывающихся блоков: анимировать масштаб или использовать современные возможности перехода к автоматической высоте там, где они поддерживаются, а в остальных случаях делать быстрое появление без плавного изменения высоты.
Отдельно про библиотеки анимаций: они удобны, но тянут за собой дополнительный вес. Для эффектов появления и наведения хватает средств самого CSS. Библиотеку стоит подключать, когда действительно нужны сложные сцены, и грузить её отложенно.
Уважение к настройке пользователя
Часть людей физически плохо переносит движение на экране: от дискомфорта до головокружения. Для этого в системах есть настройка уменьшения анимаций, и её нужно учитывать:
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}Это несколько строк, которые закрывают вопрос для всего сайта. Заодно это часть общей доступности, о которой писали в статье про версию сайта для слабовидящих.
Отдельно: автоматически прокручивающиеся карусели и мигающие элементы лучше не делать вовсе. Карусель, которая уезжает, пока человек читает, - источник раздражения, а быстрое мигание в редких случаях опасно.
Влияние на метрики
Анимации касаются двух показателей из набора Core Web Vitals.
Стабильность макета страдает, если элементы появляются со сдвигом соседей. Проверяется инструментами измерения скорости, и обычно виноваты именно эффекты появления.
Отзывчивость на действия страдает, когда в момент нажатия браузер занят анимацией. Тяжёлая сцена при прокрутке на слабом телефоне добавляет задержку к каждому нажатию.
Что именно измеряют эти показатели и как их улучшать, разбирали в статье про Core Web Vitals. Отдельная тема - фоновое видео, которое часто идёт в комплекте с анимациями: его цену разбирали в статье про видео на сайте.
Где анимации точно мешают
В формах. Плавное появление сообщений об ошибке замедляет исправление. Ошибка должна появляться сразу.
В корзине и оформлении заказа. Каждая задержка на пути к оплате - это риск отказа.
В меню. Долгое раскрытие раздражает, потому что меню открывают часто.
На первом экране. Анимация заголовка задерживает появление главного сообщения. Если она длится секунду, посетитель эту секунду смотрит на пустоту.
В таблицах и каталогах. Появление сорока карточек по очереди выглядит долгим, даже если каждая появляется быстро.
Чек-лист проверки
- Есть отклик на нажатие у всех кнопок и ссылок.
- Длительности в пределах ориентиров: частые взаимодействия быстрые.
- Анимируются прозрачность и преобразования, а не размеры и отступы.
- Скрытие блоков до появления работает только при включённых скриптах.
- Учтена настройка уменьшения анимаций.
- Нет автоматически прокручивающихся каруселей и мигания.
- Первый экран показывает текст сразу.
- После внедрения проверены показатели стабильности и отзывчивости на мобильном профиле.
- Проверено поведение при быстрой прокрутке: контент не пропадает.
- Проверено на слабом устройстве, а не только на рабочем компьютере.
Пункт 10 объясняет большинство проблем: на новом ноутбуке любая анимация выглядит гладко, а посетитель приходит с телефона трёхлетней давности.
Если хотите, чтобы мы посмотрели, что на вашем сайте тормозит и не мешают ли эффекты заявкам, напишите через контакты. Обычно достаточно посмотреть на замеры и записи визитов, чтобы найти лишнее движение в неудачных местах.
