Анимация в интерфейсе — штука тонкая. Добавишь чуть-чуть — сайт оживает, пользователь понимает, что происходит, и доверяет продукту. Переборщишь — всё начинает мигать, прыгать и тормозить, а человек просто уходит.

Поговорим о том, где анимация реально работает, где она лишняя, и как её делать так, чтобы не было стыдно.

Зачем вообще нужна анимация

Главная задача анимации — не украсить, а объяснить. Интерфейс — это не кино, здесь движение должно нести смысл.

Конкретные задачи, которые решает анимация:

Показывает, что что-то произошло. Нажал кнопку — она слегка вдавилась. Сохранил форму — появилась галочка. Без этого пользователь не знает, сработало ли действие, и нажимает ещё раз.

Ориентирует в пространстве. Открыл боковое меню — оно приехало сбоку. Теперь понятно, где оно находится и как его закрыть. Если оно просто появляется без анимации — мозг теряет пространственный контекст.

Снижает воспринимаемое время ожидания. Анимированный лоадер при загрузке данных воспринимается примерно на 20–30% короче, чем статичный. Это не магия — просто мозг иначе обрабатывает движение.

Акцентирует внимание. Появившийся элемент с лёгким fade-in замечают лучше, чем тот, что просто возник. Особенно важно для уведомлений и ошибок.

Когда анимация лишняя

Есть соблазн анимировать всё подряд — особенно когда научился делать плавные переходы. Это ошибка.

Анимация ради анимации. Если логотип крутится при загрузке просто потому что «так красиво» — это шум. Пользователь не понимает, зачем это, и раздражается.

Слишком долгие переходы. Анимация дольше 400–500 мс начинает тормозить работу. Человек ждёт, пока эффект доиграет, чтобы сделать следующее действие. Оптимальное время для большинства UI-анимаций — 150–300 мс.

Бесконечные анимации на фоне. Живые фоны, постоянно двигающиеся частицы, пульсирующие градиенты — всё это жрёт внимание и ресурсы устройства. Пользователь пришёл читать контент, а не смотреть на фон.

Анимация на каждом элементе. Если каждый блок появляется с разной задержкой, каждая кнопка имеет свой эффект, а страница при скролле «расцветает» — это хаос, а не дизайн.

Анимация там, где важна скорость. В таблицах, административных панелях, инструментах для профессионалов анимация часто только мешает. Люди работают быстро — они не хотят ждать, пока строка таблицы красиво появится.

Типы анимаций и где их применять

Микровзаимодействия

Это самый полезный класс анимаций. Маленькие, почти незаметные реакции интерфейса на действия пользователя.

Примеры:

  • Кнопка меняет цвет при наведении
  • Чекбокс «щёлкает» при активации
  • Иконка лайка слегка увеличивается при нажатии
  • Поле ввода подсвечивается при фокусе

Время: 100–200 мс. Именно так — быстро и без помпы. Задача не в том, чтобы пользователь заметил анимацию, а в том, чтобы интерфейс ощущался живым.

Переходы между состояниями

Когда элемент меняет состояние — скрывается, появляется, раскрывается — переход помогает понять, что произошло.

Аккордеон, который плавно раскрывается. Модальное окно, которое появляется с лёгким scale. Тост-уведомление, которое приезжает сверху и уезжает обратно.

Правило: движение должно быть логичным. Если меню появляется сверху, оно должно и уезжать наверх. Если элемент выдвигается справа — закрываться тоже направо. Иначе мозг запутывается.

Анимации загрузки

Скелетоны вместо спиннеров — это стандарт в 2026 году. Скелетон показывает, что данные загружаются, и даёт представление о структуре будущего контента. Это снижает тревогу ожидания.

Спиннер оставляйте для точечных операций — когда нужно показать, что кнопка обрабатывает запрос. Для загрузки целой страницы или блока данных — скелетон.

Прогресс-бар работает там, где можно показать реальный прогресс: загрузка файла, импорт данных, многошаговая операция.

Scroll-анимации

Популярный приём — элементы появляются при скролле. Работает хорошо на лендингах и маркетинговых сайтах. На корпоративных порталах и приложениях — скорее мешает.

Если используете — не задерживайте появление. Элемент должен появляться почти сразу, с минимальным сдвигом (20–40px, не 200px) и быстро (200–300 мс). Иначе при быстром скролле пользователь видит пустые блоки и ждёт, пока контент «прилетит».

Отдельно: не анимируйте то, что уже было в области видимости. Это выглядит странно.

Состояния ошибок и успеха

Ошибка должна быть заметна. Лёгкое покачивание поля (shake-анимация) при неверном вводе — классический и рабочий паттерн. Пользователь сразу понимает, что не так и где.

Успех — наоборот, спокойный. Галочка, которая «рисуется», или лёгкое появление зелёного статуса. Без фейерверков.

Как делать технически

CSS — основа

Для большинства UI-анимаций хватает CSS. transition для плавных изменений свойств, animation с @keyframes для более сложных эффектов.

.button {
  background: #0057ff;
  transition: background 150ms ease, transform 150ms ease;
}

.button:hover {
  background: #0040cc;
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0);
}

Простой эффект нажатия кнопки — три строки. Не нужно подключать библиотеки.

Выбор easing — важнее, чем кажется

Easing — это кривая скорости анимации. От неё зависит, будет ли движение ощущаться естественным или роботизированным.

  • linear — равномерная скорость. Выглядит механически, почти нигде не уместен.
  • ease-in — начинает медленно, ускоряется. Подходит для элементов, которые уходят с экрана.
  • ease-out — начинает быстро, замедляется. Подходит для элементов, которые появляются.
  • ease-in-out — плавный старт и финиш. Универсальный вариант для большинства переходов.
  • cubic-bezier — кастомная кривая. Используется когда нужно передать физику (пружина, отскок).

Для большинства интерфейсных переходов: ease-out для появлений, ease-in для исчезновений.

JavaScript-анимации

JS нужен когда:

  • Анимация зависит от данных или пользовательского ввода
  • Нужна физика (пружины, инерция)
  • CSS не справляется со сложной последовательностью

Populярные варианты: GSAP (мощный, но платный для коммерческих проектов), Framer Motion (для React), Web Animations API (нативный браузерный API, без зависимостей).

Для скролл-анимаций: Intersection Observer API — нативный, без библиотек, работает быстро.

Производительность

Анимируйте только transform и opacity. Эти свойства браузер оптимизирует отдельно — они не вызывают перерасчёт лайаута.

Анимировать width, height, margin, padding, top, left — плохая идея. Каждый кадр браузер пересчитывает расположение всех элементов. На мобильных это заметно.

Проверяйте в DevTools вкладку Performance — там видно, вызывает ли ваша анимация layout/paint или нет.

will-change: transform — подсказка браузеру, что элемент будет анимироваться. Использовать аккуратно: только на элементах, которые реально анимируются, иначе просто тратит память.

Доступность

Часть пользователей чувствительна к движению — вестибулярные расстройства, эпилепсия, просто дискомфорт. Для них в системе есть настройка «Уменьшить движение».

В CSS это учитывается через медиазапрос:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Это не опциональная фича — это базовая доступность. Особенно важно для scroll-анимаций и фоновых эффектов.

Чек-лист перед добавлением анимации

Перед тем как добавить анимацию, ответьте на три вопроса:

  1. Она что-то объясняет? Помогает ли понять, что произошло, куда перейти, что загружается?
  2. Она не мешает работе? Можно ли её пропустить или она блокирует действие?
  3. Она быстрая? До 300 мс — почти всегда ОК. Больше 500 мс — нужно обоснование.

Если хотя бы один ответ «нет» — подумайте дважды.

Типичные ошибки в реальных проектах

Одинаковое время для всех анимаций. Маленькие элементы должны анимироваться быстрее больших. Маленький чекбокс — 100 мс. Большая панель — 300 мс. Это следует физике: тяжёлые объекты движутся медленнее.

Анимация есть только в одну сторону. Элемент появляется плавно, но исчезает мгновенно — или наоборот. Оба перехода должны быть анимированы.

Задержки на каждом элементе списка. Популярный эффект — элементы появляются один за другим с задержкой 50–100 мс. Работает для 4–6 элементов. Для длинного списка пользователь ждёт секунды, пока всё «доедет».

Нет связи с брендом. Анимации — часть характера продукта. Строгий B2B-сервис должен анимироваться сдержанно. Детское приложение может позволить себе игривость. Когда анимации не соответствуют тональности — это диссонанс.

Кстати, в REEXY при разработке лендингов и корпоративных сайтов анимации обсуждаются на этапе дизайна — не добавляются постфактум. Это важно, потому что правильная анимация должна быть частью системы, а не украшением поверх готового.

Вместо вывода — практичный совет

Если вы только начинаете думать об анимациях в своём проекте: начните с микровзаимодействий. Hover-эффекты на кнопках, плавное появление модалок, shake на ошибках — это даст 80% эффекта от анимаций с минимальными усилиями.

Не пытайтесь сразу сделать сложные scroll-эффекты или анимированные иллюстрации. Простые, быстрые, осмысленные анимации всегда выигрывают у сложных и эффектных.