# Анимация на сайте: какая помогает, а какая мешает

4 ноября 2026 г. · 3 мин чтения · Студия AETHER · https://aether-studio.ru/blog/animaciya-na-sajte

Анимация на сайте — любое движение: кнопка, которая откликается на нажатие, блоки, которые появляются при прокрутке, 3D-сцена на первом экране. Хорошая анимация подсказывает, куда смотреть, и делает сайт запоминающимся. Плохая заставляет ждать, тормозит на телефоне и укачивает. Разбираем, какой она бывает и как не перестараться.

## Зачем она нужна

- **Подсказать**, куда смотреть: движение притягивает взгляд сильнее цвета.
- **Ответить** на действие: кнопка нажалась, форма отправилась, товар в корзине.
- **Объяснить**: показать, как работает продукт или что будет по шагам.
- **Создать настроение**: бренд, который двигается по-своему, запоминается.

Если анимация не делает ничего из этого, её можно убрать без потерь.

## Какие бывают

| Вид | Что это | Где уместна |
| --- | --- | --- |
| Микроанимации | Отклик кнопок, переключателей, полей формы | На любом сайте |
| Появление при прокрутке | Блоки проявляются или выезжают, когда до них доходят | Лендинги, презентации продукта |
| Переходы | Плавно открываются меню, вкладки, ответы на вопросы | На любом сайте |
| Анимированные иллюстрации | Векторные картинки и иконки, которые двигаются | Объяснить сложное, оживить пустое место |
| Видео | Ролик на фоне или в блоке | Продукт, место, атмосфера |
| 3D и частицы | Объёмная сцена прямо в браузере | Первый экран, витрина продукта |
| Параллакс | Слои двигаются с разной скоростью | Один-два акцентных блока |

О видео — статья [«Видео на сайте»](https://aether-studio.ru/blog/video-na-sajte), о параллаксе — [«Параллакс на сайте»](https://aether-studio.ru/blog/parallaks-na-sajte).

## Примеры

- **Лендинг нутрициолога Анны Стародумовой.** На первом экране — спираль ДНК из частиц: тема понятна раньше, чем прочитан заголовок. Разбор страницы — в статье [«Примеры лендингов»](https://aether-studio.ru/blog/primery-lendingov).
- **Baseline — концепт студии для теннисного клуба.** Крупная типографика, пружинная анимация и плавная прокрутка: движение поддерживает спортивную тему, а не спорит с ней.

## Когда анимация мешает

- **Текст «доезжает».** Человек хочет читать, а абзац ещё выплывает.
- **Двигается всё.** Когда анимирован каждый блок, взгляду не за что зацепиться.
- **Заставка без причины.** Экран загрузки оправдан, если за ним готовится тяжёлая сцена, а не ради эффекта.
- **Тормозит на телефоне.** Эффект, плавный на мощном компьютере, дёргается на обычном смартфоне.
- **Укачивает.** У части людей движение на экране вызывает головокружение и тошноту.

## Правила аккуратной анимации

1. **Коротко.** Отклик кнопки и раскрытие меню — доли секунды; дольше — уже ожидание.
2. **Только лёгкие свойства.** Плавнее всего двигаются сдвиг, масштаб и прозрачность: эту работу браузер отдаёт видеокарте. Анимация размеров и отступов заставляет пересчитывать страницу — и прокрутка дёргается.
3. **Содержимое видно и без анимации.** Если скрипт не загрузился, текст не должен остаться невидимым.
4. **Уважать «уменьшение движения».** Если в настройках телефона или компьютера оно включено, крупные эффекты отключают и показывают спокойную версию.
5. **Пауза для долгого движения.** По международным правилам доступности WCAG то, что двигается само дольше пяти секунд, — бегущую строку, карусель — посетитель должен иметь возможность остановить.
6. **Не больше трёх вспышек в секунду.** Частое мигание может вызвать приступ у людей с фоточувствительной эпилепсией.
7. **Проверка на обычном телефоне**, а не только на компьютере разработчика.

## Анимация и скорость

Анимация весит: библиотеки эффектов, файлы векторной анимации, 3D-модели и видео загружаются вместе со страницей. Тяжёлое подгружают после первого экрана или когда до него дошла прокрутка, а 3D готовят так, чтобы страница не зависала, пока собирается сцена. Как проверить, не стал ли сайт медленнее, — в статье [«Скорость загрузки сайта»](https://aether-studio.ru/blog/skorost-zagruzki-sajta).

## Как это делаем мы

На нашем сайте много движения: 3D-сцена на главной, анимации при прокрутке. Если в настройках телефона или компьютера включено уменьшение движения, анимации появления текста и блоков отключаются.

В лендинге анимации и 3D мы используем там, где они работают на задачу, а макет показываем и правим до начала вёрстки. Вёрстку делаем на коде, чтобы страница быстро загружалась на телефоне и медленном интернете.

**Услуга «Лендинг»:** от 4 рабочих дней, от 30 000 ₽, обычно 30 000–70 000 ₽. Подробнее: https://aether-studio.ru/services/landing

**Обсудим ваш сайт.** Ответим в течение рабочего дня, зададим несколько вопросов и назовём вилку по сроку и бюджету. Бесплатно и без обязательств. Написать: [Telegram @aether_agency](https://t.me/aether_agency), почта aether-studio@mail.ru, форма — https://aether-studio.ru/#contact.