View Transitions API

Die View Transitions API (Chrome 111+) ermöglicht flüssige, animierte Übergänge zwischen verschiedenen Zuständen einer Seite oder zwischen Seitennavigationen. Sie erfasst Screenshots vor und nach der Änderung und lässt sie mithilfe von CSS-Animationen ineinander übergehen – so werden App-ähnliche Übergänge im Web möglich.

Starten Sie einen Übergang innerhalb derselben Seite, indem Sie eine DOM-Aktualisierung in document.startViewTransition(() => updateDom()) einschließen. Der Browser erfasst den alten Zustand, führt die Aktualisierung aus, erfasst den neuen Zustand und lässt beide automatisch ineinander überblenden.

Ohne CSS führt View Transitions ein einfaches Überblenden zwischen dem alten und dem neuen Seitenzustand aus. Diese eine Zeile JavaScript fügt einen ausgefeilten Übergang hinzu, für den zuvor eine komplexe Abstimmung von CSS-Animationen oder eine eigene Animationsbibliothek erforderlich war.

Die API stellt vier Pseudoelemente bereit: ::view-transition (Root-Overlay), ::view-transition-old(root) (Screenshot der alten Seite), ::view-transition-new(root) (Screenshot der neuen Seite) und ::view-transition-image-pair(root). Passen Sie sie mit CSS-Animationen an.

Weisen Sie einem Element, das den Übergang überdauert, view-transition-name: hero-image zu. Die API führt dieses Element automatisch von seiner alten Position und Größe zu seiner neuen Position und Größe – so entsteht eine flüssige Animation auf Elementebene.

Ersetzen Sie das standardmäßige Überblenden durch eigene Keyframes für die Pseudoelemente: Lassen Sie bei der Vorwärtsnavigation das neue Bild von rechts hereingleiten und bei der Rückwärtsnavigation das alte Bild von links. Sprechen Sie ::view-transition-new(root) und ::view-transition-old(root) mit @keyframes an.

Dokumentübergreifende View Transitions (Chrome 126+) animieren den Übergang zwischen vollständigen Seitennavigationen in Anwendungen mit mehreren Seiten. Fügen Sie @view-transition { navigation: auto; } zu CSS hinzu – der Browser übernimmt den Übergang zwischen HTML-Seiten automatisch, ganz ohne JavaScript.

Benutzerinnen und Benutzer mit Gleichgewichtsstörungen sollten keinen bewegungsintensiven Übergängen ausgesetzt sein. Schließen Sie Übergangsanimationen in @media (prefers-reduced-motion: no-preference) ein, um benutzerdefinierte Animationen für Personen zu deaktivieren, die reduzierte Bewegung bevorzugen, und gleichzeitig die funktionale DOM-Aktualisierung beizubehalten.

React Router v6.4+, Vue Router und Astro unterstützen View Transitions. Frameworks schließen Routenänderungen automatisch in startViewTransition ein. Konfigurieren Sie Übergangsstile pro Route mit view-transition-name für persistente Elemente wie Navigation und Layout-Container.

View Transitions erfassen Screenshots der Seite, was bei komplexen Layouts aufwendig sein kann. Große Seiten mit vielen zusammengesetzten Ebenen können während der Aufnahme ruckeln. Halten Sie die Übergangsdauer unter 300 ms und vermeiden Sie Übergänge für extrem komplexe Teilbäume.

Prüfen Sie vor der Verwendung, ob die API verfügbar ist: if (!document.startViewTransition) { updateDom(); return; }. Der Fallback aktualisiert das DOM normal und ohne Animation. View Transitions sind eine progressive Verbesserung – die Anwendung funktioniert auch ohne sie; wo sie unterstützt werden, verbessern sie lediglich das Nutzungserlebnis.

Was ermöglicht view-transition-name an einem Element während eines View-Transitions-Übergangs?

Die View Transitions API ermöglicht mit wenig Code Überblend- und Morphing-Animationen zwischen DOM-Zuständen oder Seitennavigationen. Benannte Übergangselemente werden automatisch ineinander überführt; benutzerdefinierte Animationen für Pseudoelemente ersetzen das standardmäßige Überblenden. Berücksichtigen Sie prefers-reduced-motion und verwenden Sie progressive Verbesserungen für nicht unterstützte Browser.