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

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

Что уже умеем / что добавим

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

Что вы узнаете в рамках статьи

• Какие свойства анимировать выгодно, а какие — накладно.
• Почему transform и opacity предпочтительнее для анимаций.
• Что такое prefers-reduced-motion и зачем он нужен.
• Как смягчить или отключить анимации для чувствительных к движению.

Ключевые термины

• Перерасчёт раскладки (reflow) — пересчёт положения и размеров элементов при изменении «дорогих» свойств.
• transform — «дешёвое» для анимации свойство преобразований.
• opacity — «дешёвое» для анимации свойство прозрачности.
• prefers-reduced-motion — медиа-функция, сообщающая о желании пользователя уменьшить движение.
• Доступность (a11y) — построение интерфейса, удобного для всех, включая людей с особыми потребностями.

Что анимировать выгодно

Не все свойства одинаково «дёшевы» для анимации. Когда вы анимируете width, height, margin, top или left, браузеру приходится заново пересчитывать раскладку страницы на каждом кадре — это тяжело, и на слабых устройствах движение начинает дёргаться. А вот transform и opacity браузер умеет менять очень эффективно, часто силами видеокарты, не трогая раскладку:

/* Накладно: анимируется положение через смещение раскладки */
.box {
  transition: left 0.3s;
}

/* Выгодно: то же движение через transform */
.box {
  transition: transform 0.3s;
}

Оба варианта визуально сдвигают блок, но второй работает заметно плавнее, потому что transform не вызывает перерасчёт раскладки. Отсюда простое правило: движение делайте через transform (сдвиг, масштаб, поворот), появление и исчезновение — через opacity. Этих двух свойств хватает для подавляющего большинства красивых анимаций, и все они будут плавными.

Почему transform и opacity — лучший выбор

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

Практический вывод: если хотите анимировать «размер» — вместо width используйте transform: scale(); если «положение» — вместо top/left берите translate; для появления — opacity, а не переключение display. Это не микрооптимизация ради оптимизации, а разница между плавным и дёргающимся интерфейсом на реальных устройствах пользователей.

Уважаем выбор пользователя: prefers-reduced-motion

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

.section {
  animation: appear 0.6s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .section {
    animation: none;
  }
}

Пользователям с обычными настройками секция плавно появляется, а тем, кто попросил меньше движения, она показывается сразу, без анимации. Медиазапрос (prefers-reduced-motion: reduce) срабатывает, когда в системе включена эта настройка. Внутри него вы либо отключаете анимации (animation: none, transition: none), либо делаете их совсем короткими. Важно, что интерфейс при этом должен оставаться полностью рабочим — просто без движения.

Применяем в проекте

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

@media (prefers-reduced-motion: reduce) {
  .section {
    animation: none;
    opacity: 1;
  }

  .badge {
    animation: none;
  }

  .card {
    transition: none;
  }
}

Проверьте: при обычных настройках сайт живой — секция появляется, метка пульсирует, карточки плавно приподнимаются. Но если пользователь включил уменьшение движения, всё это спокойно отключается: секция сразу видна (мы вернули opacity: 1), метка не пульсирует, карточки не анимируются. Сайт остаётся полностью функциональным и приятным — просто без движения для тех, кому оно мешает. Это и есть зрелый, инклюзивный подход к анимации.

Частые ошибки

• Анимация width/height/top/left.
  Эти свойства вызывают перерасчёт раскладки и дёргаются; используйте transform и opacity.
• Игнорировать prefers-reduced-motion.
  Без реакции на настройку сайт неудобен части пользователей; добавляйте медиазапрос хотя бы для крупных анимаций.
• Отключить движение и сломать вид.
  Убрав анимацию появления, не забудьте оставить элемент видимым (opacity: 1), иначе он исчезнет.
• Анимация через display. 
  display нельзя плавно анимировать; для появления/скрытия используйте opacity (и при необходимости visibility).

Итоги

Прекрасная работа — вы научились анимировать не только красиво, но и правильно! Теперь вы знаете, какие свойства выгодны для анимации, почему transform и opacity дают плавность даже на слабых устройствах, и умеете уважать выбор пользователя через prefers-reduced-motion. В сквозном проекте анимации сайта компании стали производительными и инклюзивными — они радуют тех, кто любит движение, и не мешают тем, кому оно неприятно.

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