# Cross-document view transitions (@view-transition)

Status: Chrome 126, Safari 18.2; Firefox not yet (caniuse through 158). Interop 2026 focus area.  
Source: https://caniuse.com/mdn-css_at-rules_view-transition and https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@view-transition  
Page: https://designforai.dev/css/cross-document-view-transitions

Opt a multi-page site into animated navigations with one at-rule in both pages; shared `view-transition-name`s morph across pages. Gives static sites SPA-style transitions with zero JS.

## HTML

```html
<!-- page A -->
<a href="post.html" class="fx-040"><div style="aspect-ratio:16/10;background:linear-gradient(135deg,#dbeaff,#ece0ff)"></div></a>
<!-- page B has the same image with the same view-transition-name -->
```

## CSS

```css
@view-transition {
  navigation: auto
}
::view-transition-old(root) {
  animation-duration: .2s
}
::view-transition-new(root) {
  animation-duration: .3s
}
::view-transition-group(fx-040-hero) {
  animation-duration: .45s;
  animation-timing-function: cubic-bezier(.2,.8,.2,1)
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) {
    animation: none
  }
}
.fx-040 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
```

Fallback: Browsers without support navigate normally; nothing else changes.

## Prompt

Enable cross-document view transitions on this multi-page site: add `@view-transition { navigation: auto }` to the shared stylesheet, give the hero image / title on list and detail pages the same `view-transition-name`, tune durations via `::view-transition-old/new(root)` and `::view-transition-group(name)`, and disable under `prefers-reduced-motion`. Same-origin pages only; Firefox will simply navigate without animation.