# CSS-анимация без вреда скорости: transform, opacity и примеры

Страница: https://soft4android.ru/css-animatsiya-dlya-razrabotki-saytov/
Суть: Как делать CSS-анимацию на сайте, не замедляя страницу: почему анимировать transform и opacity, как учесть prefers-reduced-motion. Примеры кода и частые ошибки.

Главное:
- Плавно анимируются transform и opacity — остальное нагружает браузер
- Уважайте настройку «уменьшить движение» через prefers-reduced-motion
- Проверяйте анимацию на недорогом Android-телефоне, а не только на компьютере


CSS-анимация не вредит скорости сайта, если анимировать только свойства `transform` и `opacity`, держать эффекты короткими и отключать их для тех, кто просит систему уменьшить движение. Проблемы начинаются, когда двигают `width`, `top`, `margin` или тени: браузеру приходится заново пересчитывать раскладку страницы на каждом кадре. На мощном компьютере это незаметно, а на недорогом смартфоне превращается в рывки.

## Почему одни свойства «лёгкие», а другие нет

Чтобы показать кадр, браузер проходит несколько этапов. Упрощённо:

1. **Layout (раскладка)** — вычисляет размеры и положение каждого элемента.
2. **Paint (отрисовка)** — закрашивает пиксели: цвета, текст, тени, рамки.
3. **Composite (компоновка)** — складывает готовые слои в итоговое изображение.

Чем раньше в этой цепочке «задевает» изменение, тем дороже анимация.

| Что анимируете | Какие этапы повторяются | Нагрузка |
|---|---|---|
| `transform` (сдвиг, масштаб, поворот) | только компоновка | низкая |
| `opacity` | только компоновка | низкая |
| `color`, `background-color` | отрисовка и компоновка | средняя |
| `box-shadow`, `filter: blur()` | отрисовка, часто большой области | средняя или высокая |
| `width`, `height`, `top`, `left`, `margin`, `padding` | раскладка, отрисовка и компоновка | высокая |

Отсюда главное правило: вместо `left: 100px` используйте `transform: translateX(100px)`, вместо изменения `height` для «раскрытия» — масштаб или появление через `opacity`.

## Базовые примеры

### Плавное наведение на кнопку

```css
.button {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0) scale(0.98);
}
```

Здесь перечислены конкретные свойства в `transition`. Запись `transition: all` удобна, но опасна: она подхватит и «тяжёлые» свойства, если их кто-то потом поменяет.

### Появление блока при загрузке

```css
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  animation: fade-up 0.4s ease-out both;
}
```

Блок появляется снизу и проявляется — только за счёт `transform` и `opacity`, без изменения отступов.

### Индикатор загрузки

```css
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
```

Размеры и рамка задаются один раз, а анимируется только поворот.

## prefers-reduced-motion: уважайте настройки человека

У некоторых людей движение на экране вызывает головокружение и дискомфорт. В Android есть настройка, которая уменьшает или убирает анимации: она находится в разделе специальных возможностей (на разных телефонах называется по-разному, например «Удалить анимацию» или «Уменьшить движение»). Браузер передаёт этот выбор сайту через медиазапрос `prefers-reduced-motion`.

```css
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
```

Это «страховочный» вариант для всего сайта. Аккуратнее другой подход: писать анимации только внутри запроса `(prefers-reduced-motion: no-preference)`, тогда по умолчанию движения нет, а включается оно лишь у тех, кто его не отключал.

Учтите: убирать нужно именно движение. Смена цвета при наведении или мягкое проявление через `opacity` обычно не мешают и могут остаться.

## will-change: полезно, но в меру

Свойство `will-change: transform` подсказывает браузеру заранее вынести элемент на отдельный слой. Это может сделать сложную анимацию плавнее, но каждый слой занимает память. Если повесить `will-change` на сотню карточек, страница начнёт тормозить на слабых телефонах сильнее, чем без него.

Разумное применение:

- только для элементов, которые действительно анимируются часто или долго;
- не «на всякий случай» в общих стилях;
- если анимация разовая — можно добавить свойство перед ней и убрать после.

## Как проверить анимацию на Android-телефоне

Компьютер разработчика обычно намного мощнее телефона посетителя. Проверка на реальном устройстве обязательна.

1. Откройте страницу в Chrome на телефоне и пролистайте её: обратите внимание на рывки при появлении блоков и при прокрутке.
2. Подключите телефон к компьютеру с включённой отладкой по USB (как включить режим разработчика, описано в статье про [первые шаги в Android-разработке](https://soft4android.ru/razrabotka-android-eto/)).
3. На компьютере в Chrome откройте страницу `chrome://inspect`, выберите телефон и вкладку — откроются инструменты разработчика для страницы на телефоне.
4. На вкладке Performance запишите несколько секунд прокрутки и посмотрите, нет ли длинных задач и постоянной перерисовки.
5. Включите в системных настройках телефона уменьшение анимации и убедитесь, что сайт это учитывает.

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

- **Анимация раскладки.** Плавное изменение высоты меню через `height` выглядит красиво на компьютере и дёргается на телефоне.
- **Слишком долгие эффекты.** Для интерфейса обычно хватает 150–400 миллисекунд; секундное появление каждого блока раздражает и мешает читать.
- **Анимация всего подряд.** Когда двигается каждый элемент, внимание рассеивается, а важное теряется.
- **Бесконечные фоновые анимации.** Они постоянно нагружают процессор и расходуют батарею телефона, даже если человек просто читает текст.
- **Анимация вместо содержания.** Если без эффекта блок пустой или нечитаемый, проблема не в анимации.

Скорость важна не только для удобства: медленные и «дёргающиеся» страницы хуже воспринимаются посетителями и поиском. Что ещё влияет на скорость сайта малого бизнеса, разобрано в статье про [создание сайта](https://soft4android.ru/sozdanie-saytov/), а про одностраничники, где анимацией злоупотребляют чаще всего, — в материале про [лендинг](https://soft4android.ru/sozdanie-lendinga/).

## Коротко: что сделать

- Анимируйте `transform` и `opacity`, а не размеры и отступы.
- Перечисляйте свойства в `transition` вместо `all`.
- Добавьте правила для `prefers-reduced-motion`.
- Не расставляйте `will-change` везде подряд.
- Проверьте страницу на недорогом Android-телефоне.

## Частые вопросы

### Что лучше для анимации: CSS или JavaScript?
Для простых эффектов — наведение, появление, переходы между состояниями — CSS проще и обычно не уступает в плавности. JavaScript нужен, когда анимация зависит от действий пользователя в реальном времени, например от прокрутки или перетаскивания, или когда нужно точно управлять последовательностью. Даже в этом случае лучше менять через скрипт `transform` и `opacity`.

### Почему анимация плавная на компьютере и дёргается на телефоне?
У телефона слабее процессор и графика, а браузер на нём параллельно экономит батарею. Анимация свойств вроде `height`, `margin` или теней заставляет пересчитывать раскладку и перерисовывать страницу, и на мобильном устройстве на это не хватает времени между кадрами. Перевод анимации на `transform` и `opacity` обычно решает проблему.

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

### Влияет ли анимация на то, как сайт оценивает поиск?
Сама по себе анимация не плюс и не минус. Влияет её последствие: если из-за тяжёлых эффектов страница медленно загружается, содержимое прыгает при загрузке или поздно реагирует на нажатия, это ухудшает удобство, а поисковые системы учитывают удобство страниц.