CSS 2026: кросс-браузерная поддержка cross-document view transitions и scroll-driven animations

[hannadev]

В 2026 году CSS выходит на новый уровень с cross-document view transitions и scroll-driven animations. Эти фичи делают переходы между страницами плавными, а анимации - привязанными к скроллу, без лишнего JavaScript. Они решают проблему рывков в навигации и статичных эффектов, особенно в MPA и SPA.

Поддержка в браузерах растет благодаря Interop 2026, где Chrome, Safari, Edge и Firefox синхронизируют реализацию. Теперь можно забыть о кастомных хакках - браузеры сами берут на себя hardware-ускорение. Это упрощает код и улучшает производительность на слабых устройствах.

Cross-document view transitions: суть и настройка

Cross-document view transitions позволяют анимировать переходы между разными документами на одной origin. Браузер захватывает состояние старой страницы, обновляет DOM новой и рендерит плавный переход. Это работает для навигаций типа push, replace или traverse, без cross-origin редиректов.

В 2026 году фича вошла в Interop 2026: Chrome с 126 версии, Safari с 18.2, Edge с 126, Firefox с частичной поддержкой в 144+. Добавлены опции вроде blocking=“render” для ссылок и :active-view-transition-type() для стилизации. Без этого API переходы были рваными, теперь - как в нативных приложениях.

Для активации добавьте в CSS обеих страниц:

• @view-transition { navigation: auto; } - включает переходы автоматически.
• types: slide, fade; - задает типы для разных сценариев.
• Используйте ::view-transition-old(root) и ::view-transition-new(root) для кастомных ключевых кадров.

Браузер	Поддержка cross-document
Chrome	126+ (полная)
Safari	18.2+ (полная)
Edge	126+ (полная)
Firefox	144+ (частичная)

Нюанс: для Firefox может потребоваться флаг, но в 2026 базовая совместимость достигнута.

Scroll-driven animations: анимации по скроллу

Scroll-driven animations привязывают анимации к позиции скролла через animation-timeline, scroll-timeline и view-timeline. Вместо времени эффект зависит от прогресса прокрутки - параллакс, fade-in элементов или прогресс-бары становятся нативными.

В Interop 2026 это топ-фича: анимации GPU-ускоренные, без лагов на мобильных. Пример: элемент появляется при скролле на 50% контейнера. Это лучше JS-библиотек вроде GSAP по производительности - overhead минимальный, benchmarks показывают 2-3x плавность.

Настройка простая:

• animation-timeline: scroll(root block); - привязка к скроллу корня.
• @keyframes fade { from { opacity: 0; } to { opacity: 1; } } - ключевые кадры.
• scroll-timeline: --tl; animation-timeline: --tl; - именованный timeline.

Свойство	Описание	Пример применения
scroll-timeline	Создает timeline по оси скролла	Параллакс-эффекты
view-timeline	Timeline для видимости элемента	Fade-in по viewport
animation-timeline	Применяет timeline к анимации	Прогресс-бар скролла

Ключ: комбинируйте с container queries для responsive поведения.

Кросс-браузерная совместимость в 2026

В Interop 2026 фокус на унификации: same-document transitions уже baseline с 2025, теперь cross-document и scroll-driven. Safari, Chrome и Firefox работают над :active-view-transition-type() и для предзагрузки.

Проблемы прошлого - расхождения в edge-кейсах - решены. Firefox лидирует в partial support, но для production используйте @supports. Тестируйте на реальных устройствах: iOS Safari с 18.2 ок, Android Chrome идеален.

Проверки поддержки:

• @supports (animation-timeline: scroll()) { /* scroll-driven */ }
• if (document.startViewTransition) { /* view transitions */ }
• Fallback: обычные CSS-анимации или JS-polyfill.

Фича	Chrome	Safari	Firefox	Edge
Cross-document VT			◐
Scroll-timeline
View-timeline			◐

Важно: всегда проверяйте same-origin для transitions.

Интеграция в реальные проекты

Эти фичи упрощают MPAs без фреймворков: просто CSS на обе страницы. В React/Next.js - хуки вроде useViewTransition. Производительность растет - GPU берет нагрузку, фокус и accessibility сохраняются.

Остается доработать полифиллы для старых браузеров и комбо с hover/focus. В 2026 подумайте о типах transitions для A/B-тестов и scroll-snap для контейнеров - это следующий шаг в плавном UX.