Анимация и движение с уважением к людям

CSS-анимация — плавные переходы transition и ключевые кадры @keyframes. Медиазапрос prefers-reduced-motion позволяет уменьшить движение тем, кому оно вредит.

Зачем сайту движение

Хорошее движение работает как жест: кнопка чуть приподнялась, значит на неё можно нажать; блок выехал сбоку, значит он пришёл оттуда. Оно показывает, что произошло и откуда что взялось, и объясняет интерфейс без слов. А плохое движение отвлекает, замедляет и для многих просто вредно: от перемещений, масштабирования, вращения и параллакса (когда фон и передний план движутся с разной скоростью) у людей с нарушениями вестибулярного аппарата кружится голова и тошнит. Поэтому правило этого урока такое: добавляйте движение, которое что-то объясняет, и давайте возможность его уменьшить.

Переходы

Переход (transition) плавно меняет значение свойства, когда оно меняется:

.button {
  transition-property: transform, background-color;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}

.button:hover {
  transform: translateY(-2px);
  background-color: var(--color-accent);
}

Теперь при наведении кнопка не перескакивает, а плавно поднимается. Три части: что меняется (transition-property), как долго (duration) и как (timing-function: кривая скорости). Для отклика интерфейса хватает 150–300 миллисекунд: короче неощутимо, длиннее заставляет ждать. Кривая ease-out (быстро в начале, медленно в конце) подходит для появления, ease-in для ухода, linear для равномерного (индикатор загрузки).

Не пишите transition: all: переход начнёт плавно менять всё подряд, в том числе то, чего вы не ждали. Перечисляйте свойства.

Анимация

Когда нужно не «из состояния в состояние», а своя последовательность кадров, используют ключевые кадры:

@keyframes rise {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: none; }
}

.card {
  animation-name: rise;
  animation-duration: 0.5s;
  animation-fill-mode: both;
}

@keyframes описывает, что с чем происходит, а animation-* подключает это к элементу. Повторяющиеся и бесконечные анимации (animation-iteration-count: infinite) используйте очень осторожно: они постоянно отвлекают.

Что анимировать. Анимируйте transform (сдвиг, масштаб, поворот) и opacity: их обрабатывает видеокарта, и страница остаётся плавной. А width, height, top, left, margin заставляют браузер пересчитывать раскладку на каждом кадре, и анимация дёргается и тратит заряд. Подвигайте всё на схеме.

.card {
  transition-property: transform, opacity;
  transition-duration: 0.4s;
  transition-timing-function: ease-out;
}

Уважение: prefers-reduced-motion

В настройках почти каждой системы есть переключатель «уменьшить движение» (Reduce motion). Его включают те, кому движение вредит или мешает. Браузер передаёт сайту эту настройку, и CSS может её прочитать:

@media (prefers-reduced-motion: reduce) {
  .button:hover {
    transform: none;
  }

  .card {
    animation-name: appear; /* только плавное появление, без сдвига */
  }
}

Что именно убрать? «Уменьшить движение» это не «убрать всякую обратную связь». Уберите перемещение, масштабирование, вращение, параллакс и автоматическое воспроизведение. Оставьте плавное появление и смену цвета: они не вредят и по-прежнему помогают понять, что произошло. Не стоит выключать все переходы до нуля.

Что говорит стандарт. WCAG требует, чтобы всё, что движется само дольше пяти секунд и стоит рядом с другим содержимым, можно было остановить, поставить на паузу или скрыть (критерий 2.2.2). Ничто на странице не должно мигать чаще трёх раз в секунду: это может вызвать приступ у людей с фоточувствительной эпилепсией (2.3.1). А движение, которое запускается взаимодействием, например параллакс при прокрутке, можно отключить (2.3.3, уровень AAA).

Практика

Добавьте движение вашей странице эпохи 2025 года. Кнопка получает отклик, карточки появляются. Потом, самое важное, вы напишете блок для «уменьшить движение».

Предупреждение, как и в уроке про адаптивность: проверки видят вычисленные значения, а блока prefers-reduced-motion не видят. Проверьте его сами. В Chrome: инструменты разработчика, вкладка «Рендеринг» (Rendering; её открывает меню «⋮», «Дополнительные инструменты»), в ней пункт «Emulate CSS media feature prefers-reduced-motion» (эмуляция признака). Включите «reduce» и обновите страницу: карточки должны появляться без сдвига, а кнопка не должна подниматься при наведении.

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

Что было не так раньше

Движение на сайтах прошло через несколько эпох. Во времена Flash (2000-е) сайты начинались с заставок, которые нельзя было пропустить. Эффекты «бегущая строка» (<marquee>) и «мигание» (<blink>) были в самом HTML и давно объявлены устаревшими. С 2010-х сайты украшали параллаксом и огромными анимациями, и жалоб на тошноту стало столько, что в 2017 году Safari первым добавил prefers-reduced-motion, а за ним и другие браузеры. Главный урок этой истории: движение принадлежит читателю, а не автору.