View Transitions

View Transitions

View Transitions are most useful when you stop thinking of them as a one-off animation trick and start treating them as navigation infrastructure. Interop 2026 is focused on making the whole route-change story coherent across same-document and cross-document flows.

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: ease;
}

Same-Document and Cross-Document Need the Same Discipline

Use document.startViewTransition() for in-app state changes and SPA route swaps. Use @view-transition { navigation: auto; } when you want multi-page navigations to participate too. Keep naming and motion rules consistent across both paths so the app feels like one system.

Types and Route-Aware CSS Are the Big Upgrade

Transition types let you express intent such as forwards, backwards, modal-open, or drill-down without leaving helper classes stuck on the document. Pair them with :active-view-transition-type() and you get directional motion without brittle cleanup code.

Block Render Only for Transition-Critical Pieces

Render-blocking scripts, styles, and rel="expect" are useful when the incoming page must have a specific element ready before the new snapshot is taken. Use that power narrowly. The goal is preserving the transition target, not stalling the whole page for convenience.

Groups and Motion Rules

View transition groups are already a solid baseline for organizing related elements. Keep durations short, animate landmarks instead of every child, and respect reduced motion so transitions clarify navigation instead of turning every route change into a performance demo.

---