Когда анимации пора закончиться

Основа материала — заметка об анимации при наведении 2013 года. Разбор prefers-reduced-motion и пример кода подготовлены в октябре 2026 года с учётом более поздних возможностей браузеров.

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

Такой переход можно описать без скриптов. В примере меняется только фон ссылки; подчёркивание сохраняется, а клавиатурный фокус получает отдельную обводку.

<a class="menu-link" href="/blog">Блог</a>

.menu-link {
  color: #174b70;
  background-color: #ffffff;
  transition: none;
}

.menu-link:hover {
  background-color: #e4eef5;
  transition: background-color 120ms linear;
}

.menu-link:focus {
  outline: 2px solid #174b70;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .menu-link:hover {
    transition: none;
  }
}

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

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

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

У панели другая работа

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

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

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

Когда работа действительно закончилась

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

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

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

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