Stellen Sie sich vor, Ihre WordPress-Website animiert Seitenwechsel so weich wie eine native App, ganz ohne React, ohne Astro, ohne JavaScript-Router. Genau das leistet die View-Transitions-API seit Chrome 126 für klassische Multi-Page-Architekturen. Firefox 144 und Safari 18 ziehen langsam nach, und bei Chrome-Nutzern sehen Ihre Besucher bereits heute echte Page-Morphs.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Das Wichtigste in Kürze
- Cross-Document View Transitions funktionieren in Chrome 126+, Edge 126+ und Opera 112+ ohne Flag.
- Eine einzige CSS-At-Rule
@view-transitionaktiviert den Effekt auf beiden beteiligten Seiten. - Nicht unterstützende Browser zeigen den klassischen Sprung, ohne dass die Seite bricht.
Wie das technisch funktioniert
Snapshot-Magie: Beim Klick auf einen internen Link erstellt der Browser ein Bild der alten Seite, lädt die neue Seite, erstellt ein zweites Bild und animiert zwischen beiden Zuständen. Das passiert ohne Zutun des Entwicklers. Beide HTML-Dokumente müssen lediglich denselben Origin haben und die At-Rule @view-transition { navigation: auto; } ausliefern. Die offizielle Chrome-Dokumentation beschreibt das Verfahren im Detail.
Was sich für klassische Websites ändert
SPA-Zwang weg: Bis 2025 lautete das Argument für Frameworks wie Next.js oder Nuxt regelmäßig „weiche Übergänge gehen sonst nicht“. Dieses Argument ist hinfällig. Eine WordPress-Site, eine Hugo-generierte Dokumentation oder ein PHP-Shop liefern dieselbe gefühlte App-Qualität. Wer benannte Übergänge möchte, vergibt einer Produktkarte einen view-transition-name, und der Browser morpht sie auf der Detailseite an ihre neue Position. Ohne ein einziges Frontend-Framework. Im breiteren Kontext der Webdesign Trends 2026 ordnet sich dieser Schritt in eine Bewegung ein, die JavaScript-Frameworks zunehmend optional macht.
Performance und Wahrnehmung
Wahrgenommene Geschwindigkeit: Eine Demo-Galerie für digitale Kunst berichtete von 22 Prozent niedrigeren Bounce-Raten nach Einführung der Cross-Document-Transitions, obwohl die tatsächliche Ladezeit unverändert blieb. Der Effekt ist psychologisch: Eine Seite, die fließt, fühlt sich verbunden an. Eine Seite, die springt, wirkt fragmentiert. In Kombination mit <script type="speculationrules"> für vorausschauendes Prerendering liegt die nächste Seite oft schon im Speicher, wenn der Übergang startet.
Was wir hier sehen, ist das Ende eines jahrelangen Argumentationsmusters. SPAs hatten einen UX-Vorteil, der gerade verschwindet.
— Markus Seyfferth, Chefredakteur Dr. Web
Was Sie jetzt prüfen sollten
Erster Schritt: Falls Sie eine Multi-Page-Website mit klarer Wiedererkennungsstruktur betreiben, lohnt sich der Versuch heute. Ergänzen Sie auf Ihren wichtigsten Templates die At-Rule und definieren Sie eine sanfte Cross-Fade-Animation. Für die nahtlose Produktdetailansicht oder Blog-zu-Artikel-Übergänge lohnt sich das Vergeben benannter Transitions auf Bildern und Überschriften. Wer auf saubere CSS-Grundlagen setzt, integriert die neuen Pseudo-Elemente in zwanzig Minuten. Safari und Firefox-Nutzer sehen den klassischen Sprung, niemand bemerkt einen Fehler.
Mehr Newshunger?
