Блог · Дизайн
21 ноября 2026
Микроанимации,
которые не бесят
Где анимация реально помогает интерфейсу, а где — просто раздражает и тормозит.
Где анимация реально помогает интерфейсу, а где — просто раздражает и тормозит.
Не украшение, а объяснение
Хорошая микроанимация — это не «красиво», а способ объяснить пользователю, что произошло: откуда появилось меню, куда делась карточка после удаления, что кнопка отреагировала на клик. Мозг легче воспринимает плавные переходы, чем мгновенные скачки состояния интерфейса.
Плохая анимация — противоположность: она задерживает пользователя там, где он просто хочет быстро выполнить действие, и превращается в раздражающее препятствие при частом использовании.
Правило простое: чем чаще действие, тем короче анимация
Не всё, что можно анимировать в CSS, стоит анимировать
Анимация transform и opacity обрабатывается GPU отдельно от остального рендеринга страницы — плавно даже на слабых устройствах. Анимация width, height, top или left заставляет браузер пересчитывать расположение всех соседних элементов на каждом кадре — это заметно медленнее и может «дёргаться».
/* быстро — использует GPU */ .card { transition: transform .2s, opacity .2s; } .card:hover { transform: translateY(-4px); } /* медленно — пересчитывает layout */ .card { transition: top .2s, width .2s; }
prefers-reduced-motion — не экзотика, а реальная настройка ОС
Некоторые пользователи осознанно отключают анимации в настройках операционной системы — например, из-за вестибулярных нарушений, которые вызывает движение на экране. Хороший сайт учитывает это через медиа-запрос prefers-reduced-motion и упрощает или отключает анимации для таких пользователей.
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}Короткие ответы на главное
Для большинства UI-переходов — 150-300 миллисекунд. Короче кажется резким, длиннее — тормозит интерфейс и раздражает при частом использовании.
Настройка ОС, которую можно включить, если анимации вызывают дискомфорт (например, при вестибулярных нарушениях). Сайт может её учитывать через одноимённый CSS-медиазапрос и отключать анимации для таких пользователей.
transform и opacity — браузер анимирует их на GPU, не пересчитывая layout всей страницы. Анимация width, height или top/left работает заметно медленнее.
Сделаем интерфейс с анимацией, которая помогает, а не раздражает.