Почему одна анимация кажется живой, а другая раздражает

Движение тоже что-то сообщает

Карточка товара чуть приподнимается при наведении: это может подсказать, что её можно открыть. Панель появляется со стороны кнопки: становится понятнее, откуда она взялась. Но если каждый элемент крутится, прыгает и меняет размер одновременно, взгляд вынужден разбираться с движением вместо содержания. Красивый отдельный эффект не гарантирует удобную страницу.

Начни с вопроса, что изменилось для человека. Он навёл указатель, открыл меню, получил результат или ждёт загрузку? Анимация должна помогать заметить этот переход. Если ответ сводится к «так веселее», эффект всё ещё может быть уместен в декоративной сцене, но его стоит отделить от важного текста и управления.

Одинаковый путь можно пройти по-разному

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

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

Почему слишком долгий эффект утомляет

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

Универсального правильного числа для всех интерфейсов нет. В учебном примере ниже используется 180 миллисекунд как отправная точка. Попробуй 80, 180 и 600, несколько раз наведи указатель и убери его. Оцени не только плавность, но и то, насколько быстро карточка отвечает на действие. Особенно хорошо лишняя длительность заметна при повторении.

Делаем небольшой, управляемый переход

Пример меняет transform, поэтому соседние карточки не перестраиваются из-за увеличения. Но визуальное пересечение всё равно возможно: вокруг нужно оставить достаточно места. Эффект задан и для focus-visible, чтобы пользователь клавиатуры получал отклик. При этом видимый контур фокуса сохранён отдельно: движение не должно быть единственной подсказкой выбранного элемента.

Проверь прерывание перехода: быстро проведи указателем через карточку, затем вернись. Убедись, что эффект не запускает очередь из нескольких независимых анимаций. Для такого небольшого изменения CSS transition обычно проще, чем собственный таймер, который вручную меняет размеры на каждом шаге.

.card {
  transition: transform 180ms ease-out;
}
.card:hover, .card:focus-visible {
  transform: translateY(-4px) scale(1.03);
}
.card:focus-visible {
  outline: 2px solid #002fa7;
  outline-offset: 5px;
}
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover, .card:focus-visible { transform: none; }
}

Автоматическое движение требует особого внимания

Анимация, которую человек сам запускает, отличается от постоянного движения рядом с читаемым текстом. Бесконечно плавающие объекты могут отвлекать даже тогда, когда каждый выглядит удачно. Стоит проверить общий экран: не пересекают ли они заголовок, кнопку или друг друга, остаётся ли спокойная область для чтения.

Некоторым людям движение вызывает физический дискомфорт. Системная настройка уменьшения движения доступна сайту через prefers-reduced-motion. В нашем примере она выключает декоративное перемещение, сохраняя контур фокуса. Это не полная проверка доступности, но важная часть поведения. Если эффект несёт информацию, нужно сохранить её и в варианте без движения.

Разберём карточку с увеличением по клику

Представь галерею из нескольких работ. По клику выбранная карточка увеличивается на месте, чтобы её было удобнее рассмотреть. Здесь нужны два состояния: обычное и выбранное. Если вместо состояния запускать короткую анимацию «увеличить и вернуть», человек не успеет ничего изучить. Внешне эффект присутствует, а задача не решена.

Полезно заранее определить поведение второго клика, выбора соседней работы и клавиши Escape. Например, второй клик возвращает исходный размер, соседняя работа становится выбранной вместо предыдущей, Escape снимает выбор. При этом увеличение не должно закрывать текст или важную кнопку. Проверять нужно самые крупные работы и крайние положения композиции, а не только маленькую карточку в центре.

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

Как проверять анимацию как часть интерфейса

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

Отдельно проверь смысл клика. Если клик увеличивает работу для рассмотрения, увеличение должно сохраняться понятное время или до следующего действия, а не исчезать мгновенно. Если карточка открывает страницу, пусть ведёт себя как ссылка. Согласованность важнее количества эффектов: человек должен понимать, что произошло, почему произошло и как вернуться к предыдущему состоянию.