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

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

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

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

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

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

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

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

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

.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 удобна, но опасна: она подхватит и «тяжёлые» свойства, если их кто-то потом поменяет.

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

@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, без изменения отступов.

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

@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.

@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-разработке).
3. На компьютере в Chrome откройте страницу chrome://inspect, выберите телефон и вкладку — откроются инструменты разработчика для страницы на телефоне.
4. На вкладке Performance запишите несколько секунд прокрутки и посмотрите, нет ли длинных задач и постоянной перерисовки.
5. Включите в системных настройках телефона уменьшение анимации и убедитесь, что сайт это учитывает.

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

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

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

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

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

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

Что лучше для анимации: CSS или JavaScript?

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

Почему анимация плавная на компьютере и дёргается на телефоне?

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

Нужно ли полностью отключать анимацию при prefers-reduced-motion?

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

Влияет ли анимация на то, как сайт оценивает поиск?

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