Cross-document view transitions (@view-transition)

Chrome 126, Safari 18.2; Firefox noch nicht (caniuse bis 158). Interop-2026-Fokusbereich.

Chrome 126Edge 126Safari 18.2Firefox no

Schaltet eine mehrseitige Site mit einer At-Regel auf beiden Seiten auf animierte Navigationen um; gemeinsame `view-transition-name`s morphen über Seiten hinweg. Gibt statischen Seiten SPA-artige Übergänge mit null JS.

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; }

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 -->

Fallback: Browser ohne Unterstützung navigieren normal; sonst ändert sich nichts.

Quelle: caniuse.com/mdn-css_at-rules_view-transition and https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@view-transition

Prompt

Aktiviere Cross-Document View Transitions auf dieser mehrseitigen Site: ergänze `@view-transition { navigation: auto }` im gemeinsamen Stylesheet, gib dem Hero-Bild / Titel auf Listen- und Detailseiten denselben `view-transition-name`, stimme Dauern über `::view-transition-old/new(root)` und `::view-transition-group(name)` ab und deaktiviere unter `prefers-reduced-motion`. Nur Same-Origin-Seiten; Firefox navigiert einfach ohne Animation.