ГайдыОбновлено · 08.2026

Плавные переходы между страницами: создание эффектных анимаций с использованием CSS и скриптов

23 августа 2023 · 10 минут чтения

Проверка фактов

Юлия Найпак

Методист по автоматизации. Сверяет паспорт инструмента с документацией вендора.

Автор Р

Редакция

Коллектив авторов, редакторов и иллюстраторов статей на сайте блога онлайн-университета «Зерокодер». Пишем…

Черновик готовит редакция с помощью ИИ. За стандарт издания отвечает главный редактор — Валерий Курземнек.

Плавные переходы между страницами сайта сегодня включаются штатным CSS-правилом @view-transition из View Transitions API: несколько строк на обеих страницах — и браузер сам снимает кадры старого и нового вида, а затем плавно перетекает из одного в другой, без JavaScript и без библиотек. Ниже — рабочий код для трёх уровней: современный API, анимации на transition и запасной вариант для браузеров без поддержки.

• @view-transition — переходы между отдельными HTML-страницами на чистом CSS;
• document.startViewTransition() — плавная смена контента внутри одной страницы;
• transition и animation — микроанимации и появление контента при загрузке;
• фолбэк на JavaScript покрывает браузеры, где API ещё нет;
• prefers-reduced-motion отключает эффекты тем, кому движение мешает.

Старый способ — перехватывать клики скриптом, гасить страницу через opacity и вручную переводить пользователя по ссылке — остаётся только как фолбэк. Базовые же свойства CSS по-прежнему нужны: на transition держатся все микроанимации, от кнопок до карточек. Как устроены декоративные слои поверх этого, мы разбирали в статьях про градиенты и тени в CSS и перекраску картинок средствами CSS.

Три способа сделать плавные переходы

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

Библиотеки вроде Barba.js и Swup, которые раньше имитировали переходы, перехватывая навигацию скриптом, для типовой задачи больше не нужны: браузер делает то же самое нативно. jQuery-приёмы с fadeOut() перед сменой адреса — тем более наследие.

Плавный переход между страницами на чистом CSS

Правило @view-transition включает переходы при обычной навигации по ссылкам. Условия два: обе страницы лежат на одном домене, и обе объявили правило у себя в стилях. Код одинаковый для всех страниц сайта, поэтому его достаточно положить в общий файл стилей:

/* styles.css — общий для всех страниц */
@view-transition {
  navigation: auto;
}

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

Свой сценарий вместо затухания

Стандартную анимацию можно заменить. Снимки старой и новой страницы доступны из CSS через псевдоэлементы ::view-transition-old(root) и ::view-transition-new(root) — к ним применяются обычные @keyframes:

::view-transition-old(root) {
  animation: page-out 0.3s ease-in both;
}

::view-transition-new(root) {
  animation: page-in 0.3s ease-out both;
}

@keyframes page-out {
  to { opacity: 0; transform: translateY(-16px); }
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(16px); }
}

Здесь уходящая страница растворяется со сдвигом вверх, новая — поднимается снизу. Длительность 0.3 секунды — рабочий ориентир: короче — глаз не успевает, заметно дольше — сайт начинает казаться медленным.

Общий элемент перелетает со страницы на страницу

Сильная сторона API — связывание элементов. Если элементу на старой и на новой странице задано одно и то же имя через свойство view-transition-name, браузер анимирует его отдельно от остального контента: карточка товара из каталога «перелетает» на своё место на странице товара, меняя размер и позицию по пути.

/* на странице каталога */
.product-card__cover {
  view-transition-name: product-cover;
}

/* на странице товара */
.product-page__cover {
  view-transition-name: product-cover;
}

Два ограничения. Имя обязано быть уникальным в пределах страницы: два элемента с одним view-transition-name на одной странице ломают переход. И связывать имеет смысл только то, что действительно присутствует на обеих страницах — логотип, обложку, заголовок.

Плавная смена контента внутри одной страницы

Когда страница не перезагружается — вкладки, фильтры каталога, переключение экранов в SPA — работает метод document.startViewTransition(). Ему передаётся функция, которая меняет DOM; браузер сам сравнит состояние до и после и анимирует разницу:

const container = document.querySelector('.content');

function showSection(html) {
  // браузеры без поддержки просто меняют контент сразу
  if (!document.startViewTransition) {
    container.innerHTML = html;
    return;
  }

  document.startViewTransition(() => {
    container.innerHTML = html;
  });
}

Проверка наличия document.startViewTransition перед вызовом здесь не украшение, а обязательная часть: в браузере без API вызов несуществующего метода уронит скрипт, а с проверкой пользователь получит мгновенную смену контента — без анимации, но без ошибок. Кастомизируется такой переход теми же псевдоэлементами ::view-transition-old() и ::view-transition-new(), что и межстраничный.

С фреймворками метод сочетается без посредников: обновление состояния в React или Vue оборачивается в startViewTransition так же, как любое другое изменение DOM.

Плавные анимации CSS: transition и transform

Внутри самих страниц плавность держится на двух свойствах. transition описывает, как элементу менять стили между состояниями, transform — что именно менять: смещение, масштаб, поворот. Классическая связка для кнопки или ссылки:

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #3498db;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.button:hover {
  background-color: #2980b9;
  transform: scale(1.05);
}

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

Для появления контента при загрузке страницы используется animation с ключевыми кадрами — она срабатывает сама, без смены состояния:

@keyframes content-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

main {
  animation: content-in 0.4s ease;
}

Разница между свойствами простая: transition ждёт события — наведения, клика, смены класса, — а animation проигрывается по расписанию ключевых кадров. Для реакции на действие пользователя берётся первое, для самостоятельных эффектов — второе.

ОБЗОРНЫЙ ПРАКТИКУМ ПО НАШУМЕВШИМ НЕЙРОСЕТЯМ

Нейросети DEEPSEEK И QWEN За 2 часа сделаем полный обзор новых мощных ИИ-моделей, которые бросают вызов нейросети ChatGPT

ТОП-подарки всем участникам лекции:

• Возможность получить Доступ в Нейроклуб на целый месяц
• Как ИИ ускоряет работу и приносит деньги
• За 2 часа вы получите четкий план, как начать работать с ИИ прямо сейчас!

Участвовать бесплатно

Запасной вариант перехода на JavaScript

Для браузеров без View Transitions API межстраничный переход собирается вручную: скрипт перехватывает клик по внутренней ссылке, гасит страницу и только потом переводит пользователя по адресу. Стили:

body {
  opacity: 1;
  transition: opacity 0.25s ease;
}

body.is-leaving {
  opacity: 0;
}

Скрипт:

document.addEventListener('click', (event) => {
  const link = event.target.closest('a[href]');
  if (!link) return;
  // внешние ссылки и новые вкладки не трогаем
  if (link.origin !== location.origin || link.target === '_blank') return;

  event.preventDefault();
  document.body.classList.add('is-leaving');
  setTimeout(() => { location.href = link.href; }, 250);
});

// возврат кнопкой «Назад»: снять класс, иначе страница
// восстановится из bfcache прозрачной
window.addEventListener('pageshow', () => {
  document.body.classList.remove('is-leaving');
});

Обработчик pageshow — та деталь, на которой этот приём обычно ломается. Современные браузеры при возврате кнопкой «Назад» восстанавливают страницу из кеша назад-вперёд (bfcache) ровно в том состоянии, в котором её покинули, — вместе с классом is-leaving. Без сброса класса пользователь возвращается на невидимую страницу.

Вторая оговорка — задержка setTimeout добавляет 250 миллисекунд к каждому переходу. Нативный @view-transition искусственной паузы перед навигацией не создаёт. Поэтому фолбэк держат как запасной вариант рядом с API, под проверкой поддержки, — заменой ему он не служит. Похожим перехватом событий собирается и загрузка файлов перетаскиванием — разбор в статье про Drag-and-Drop.

Поддержка браузеров и деградация

По данным caniuse.com на август 2026 года, переходы внутри одной страницы (document.startViewTransition) работают у 90,2% пользователей: Chrome и Edge — с версии 111, Safari — с 18.0, Firefox — с 144. Межстраничное правило @view-transition моложе и покрывает 84,8%: Chrome и Edge — с версии 126, Safari — с 18.2, а Firefox его пока не поддерживает — MDN помечает правило статусом «Limited availability».

Практический вывод из этих цифр спокойный: неподдерживаемое CSS-правило браузер молча игнорирует, поэтому в Firefox сайт с @view-transition просто открывает страницы мгновенно, как открывал всегда. Ничего не ломается — теряется только украшение. Это позволяет включать переходы уже сейчас, не дожидаясь стопроцентного покрытия.

Отключение эффектов по просьбе пользователя

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

@media (prefers-reduced-motion) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

Тот же медиазапрос стоит распространить и на самодельный JS-фолбэк: проверка window.matchMedia('(prefers-reduced-motion: reduce)').matches перед добавлением класса is-leaving избавляет от эффекта тех, кто его явно выключил.

Частые вопросы о плавных переходах

Как сделать плавный переход между страницами без JavaScript?

Добавить в общий файл стилей правило @view-transition со значением navigation: auto. Оно должно действовать на обеих страницах — и на той, с которой уходит пользователь, и на той, куда он приходит. Браузер с поддержкой правила сам анимирует смену страниц перекрёстным затуханием.

Почему @view-transition не срабатывает?

Три типовые причины: страницы лежат на разных доменах, а переход работает только внутри одного; правило объявлено лишь на одной из двух страниц; браузер не поддерживает межстраничные переходы — на август 2026 года это весь Firefox. Ошибок в консоли при этом нет, правило молча игнорируется.

Как сделать плавную анимацию в CSS при наведении?

Задать элементу свойство transition с именем анимируемого свойства и длительностью, например transition: background-color 0.3s ease, а в состоянии :hover указать новое значение. Смена будет растянута на указанное время в обе стороны — и при наведении, и при уходе курсора.

Чем transition отличается от animation?

Свойство transition реагирует на смену состояния элемента — наведение, клик, добавление класса — и анимирует разницу между старыми и новыми стилями. Свойство animation проигрывает сценарий из ключевых кадров @keyframes самостоятельно, без внешнего события, и умеет повторяться.

Что увидят посетители со старыми браузерами?

Обычную мгновенную смену страниц, как раньше: неизвестное CSS-правило браузер пропускает без ошибок. Если плавность нужна и там, добавляется запасной вариант на JavaScript — перехват клика, класс с opacity: 0 и переход по ссылке после короткой задержки.

Коротко: как выбрать способ перехода

• Многостраничный сайт — @view-transition { navigation: auto; } в общих стилях, и переходы работают у большинства посетителей без единой строки JavaScript.
• Общие элементы двух страниц — связать через view-transition-name, чтобы карточка или логотип перелетали на новое место целиком.
• Смена контента без перезагрузки — document.startViewTransition() с проверкой поддержки.
• Микроанимации кнопок и карточек — transition на transform и opacity, без анимации размеров.
• Старые браузеры — JS-фолбэк с гашением opacity и обязательным сбросом класса в pageshow.
• Во всех вариантах — уважать prefers-reduced-motion.

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