Правило @view-transition в CSS3 — это инструмент для создания плавных анимаций при переходе между разными HTML-страницами (в многостраничных приложениях, MPA). Оно работает в связке с View Transitions API — встроенным браузерным механизмом, который делает снимки DOM «до» и «после» обновления и анимирует переход между ними.
Как это работает
При навигации браузер фиксирует текущее состояние страницы, выполняет обновление DOM, затем фиксирует новое состояние и запускает CSS-анимацию, интерполируя между ними.
Ключевое условие для кросс-документных переходов: обе страницы (исходная и целевая) должны находиться на одном origin (совпадать по протоколу, домену и порту). Иначе переход не сработает.
Базовый синтаксис:
@view-transition {
navigation: auto;
}
navigation: auto;
— разрешает переход при навигации. Браузер по умолчанию применяет кроссфейд (затухание) между старой и новой страницей.
navigation: none;
— отключает плавные переходы (значение по умолчанию).Важный нюанс: чтобы переход сработал, правило @view-transition
нужно добавить на обе страницы. Если правило есть только на одной, переход не произойдёт.
Кастомизация анимации
По умолчанию браузер сам решает, как анимировать переход (часто это кроссфейд). Но вы можете полностью переопределить анимацию, используя специальные псевдоэлементы и @keyframes
::view-transition-old(root)
— стили для элементов старой страницы (состояние «до» обновления).
::view-transition-new(root)
— стили для элементов новой страницы (состояние «после» обновления).Пример:
/* Анимация, когда старая страница уходит */
::view-transition-old(root) {
animation: slideOut 0.3s ease-in-out both;
}
/* Анимация, когда появляется новая страница */
::view-transition-new(root) {
animation: slideIn 0.3s ease-in-out both;
}
/* Определение самих анимаций */
@keyframes slideOut {
to { transform: translateX(-100%); }
}
@keyframes slideIn {
from { transform: translateX(100%); }
}Ещё один приём: можно дать общее имя перехода элементам, которые должны плавно перемещаться между страницами (например, общему изображению в карточке товара и на детальной странице). Для этого используется свойство view-transition-name
Поддержка браузерами
Правило @view-transition относится к CSS View Transitions Module Level 2, который поддерживает:
- Chrome 126+
- Edge 126+
- Safari 18.2+
В Firefox поддержка Level 2 пока в разработке.
Важное замечание: если браузер не поддерживает эту функцию, сайт продолжит работать в обычном режиме — @view-transition работает как прогрессивное улучшение.
Дополнительные возможности
Ограниченные переходы (Scoped Transitions). В Chrome 148+ появилась возможность ограничивать переход конкретным поддеревом DOM, а не всей страницей.
Учёт prefers-reduced-motion. Для доступности можно ограничить анимации для пользователей, которые предпочитают их отключать:
@media (prefers-reduced-motion: reduce) {
@view-transition {
navigation: none;
}
}Вывод
@view-transition — мощный инструмент для создания плавных и выразительных переходов между страницами без необходимости писать много JavaScript. Главное — не забыть добавить это правило на обе стороны навигации и продумать анимации для общих элементов.