View Transitions: flüssige Seitenübergänge ohne Framework

Jahrelang erforderte das Animieren des Wechsels von einer Ansicht zur nächsten eine eigene Bibliothek und zusätzlichen Code. Die View Transitions API verlagert diese Arbeit in den Browser: Sie erstellt eine Momentaufnahme des alten Zustands, eine des neuen und interpoliert dazwischen. Sie kommt in zwei Varianten, eine für Single-Page-Apps und eine für die Navigation zwischen Seiten, und lässt sich dank sauberer Degradation risikofrei einsetzen.

#Zwei APIs unter einem Namen

Der Begriff umfasst zwei verwandte, aber unterschiedliche Mechanismen. Der Übergang innerhalb einer Seite (same-document) greift, wenn JavaScript das DOM an Ort und Stelle verändert, typisch für eine Single-Page-App. Der Übergang zwischen Seiten (cross-document) greift bei einer klassischen Navigation von einer URL zur nächsten, sofern beide Seiten denselben Ursprung teilen. Beide stützen sich auf dieselbe Rendering-Engine und dieselben Selektoren, was den Lernaufwand gering hält.

Die gute Nachricht passt in eine Zeile: Kann der Browser nicht animieren, wird die Seite trotzdem aktualisiert.

#Einen Übergang innerhalb einer Seite animieren

Der Einstiegspunkt ist document.startViewTransition. Die Funktion erhält einen Callback, der das DOM verändert; der Browser erfasst den Bildschirm vor dem Aufruf, führt den Callback aus, erfasst den Bildschirm danach und animiert den Wechsel. Eine Feature-Prüfung genügt, um den Rückfall abzusichern.

function mettreAJourVue(donnees) {
  // remplace le contenu du DOM ici
}

if (!document.startViewTransition) {
  mettreAJourVue(donnees);            // repli : mise a jour sans animation
} else {
  document.startViewTransition(() => mettreAJourVue(donnees));
}

Ohne Anpassung wendet der Browser eine Überblendung auf die gesamte Seite an. Das hilft bereits bei einem Tab-Wechsel, einer Listensortierung oder dem Öffnen eines Panels, wo ein harter Schnitt bislang die Lesbarkeit störte.

#Zwei Seiten ohne JavaScript verketten

Der Übergang zwischen Seiten braucht kein Skript. Er wird per CSS aktiviert, auf beiden beteiligten Seiten, über eine Opt-in-Regel. Die Navigation muss im selben Ursprung bleiben; ein Link auf eine andere Domain löst keinen Übergang aus.

/* opt-in : transitions entre pages de meme origine */
@view-transition {
  navigation: auto;
}

Von da an erzeugt ein einfacher Klick auf einen internen Link eine Überblendung zwischen alter und neuer Seite, ganz ohne Routing-Bibliothek oder clientseitiges Rendern. Für eine redaktionelle Website oder einen Shop mit klassischen Seiten ist das der unmittelbarste Gewinn.

#Ein Element von einer Ansicht in die nächste tragen

Der auffälligste Effekt ist das Morphing: ein Vorschaubild, das zur Kopfgrafik der nächsten Seite anwächst, zum Beispiel. Man gibt dem Ausgangs- und dem Zielelement schlicht denselben view-transition-name. Der Browser erkennt, dass es sich um dasselbe Objekt handelt, und animiert es von einer Position zur anderen.

.carte-article img {
  view-transition-name: visuel-article;
}

::view-transition-old(visuel-article),
::view-transition-new(visuel-article) {
  animation-duration: 300ms;
}

Jeder Name muss innerhalb einer Ansicht eindeutig sein. Der Browser erzeugt dann einen Baum von Pseudoelementen: ::view-transition-group(), ::view-transition-old() und ::view-transition-new(), die man in CSS anspricht, um Dauer, Kurve oder Bahn zu justieren. Die Seitenwurzel trägt den reservierten Namen root, womit sich die globale Überblendung anpassen lässt.

#Die Animation anpassen und Präferenzen achten

Da die Pseudoelemente mit gewöhnlichen CSS-Regeln animiert werden, gilt das gesamte übliche Werkzeug: animation, @keyframes, Verzögerungen. Die Kehrseite ist eine Barrierefreiheitspflicht: eine zu betonte Animation stört einen Teil der Nutzer. Die Abfrage prefers-reduced-motion muss die Übergänge für alle abschalten, die es angefordert haben.

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

Diese Vorsichtsmaßnahme kostet fast nichts und verhindert, dass aus einer Verbesserung ein Hindernis wird. Sie gilt für jede Animation, nicht nur für View Transitions.

#Ein konkretes Beispiel: von der Liste zum Detail

Der anschaulichste Fall ist der Wechsel von einem Raster aus Artikeln zur Artikelseite. Im Raster trägt das Vorschaubild einen Übergangsnamen; auf der Detailseite trägt die Kopfgrafik denselben Namen. Beim Klick verbindet der Browser beide und lässt das Vorschaubild bis zu seiner Endposition wachsen, während der Rest der Seite überblendet. Der Nutzer behält den visuellen Faden: Er sieht, woher der Inhalt stammt, den er liest, was die mentale Last einer Navigation senkt.

Damit der Effekt sauber bleibt, darf der Name in jeder Ansicht nur auf einem Element gleichzeitig vorkommen. Teilen sich mehrere Vorschaubilder im selben Moment denselben Namen, weiß der Browser nicht mehr, welches er animieren soll, und verwirft den Übergang. Die praktische Regel lautet, den Namen aus einer eindeutigen Kennung zu bilden, etwa dem Artikel-Slug, statt aus einem überall wiederverwendeten festen Wert.

#Fallstricke, die man kennen sollte

Drei Fehler treten häufig auf. Der erste ist der doppelte Übergangsname, der die Animation stillschweigend abbricht. Der zweite sind Layout-Verschiebungen: Ordnet sich der Inhalt während der Aufnahme neu, friert die Momentaufnahme einen Zwischenzustand ein und die Animation wirkt sprunghaft. Besser, man behält Übergänge für Änderungen vor, bei denen die Struktur stabil bleibt. Der dritte betrifft die Kosten: Jedes benannte Element erzeugt eigene Momentaufnahmen, und viele Namen auf einer Ansicht belasten das Rendering ohne sichtbaren Nutzen. Wenige Schlüsselelemente genügen fast immer.

Ein letzter Reflex erspart viel Ärger: Ein Übergang darf niemals eine echte Ladezeit verdecken. Wartet die nächste Seite auf Daten, spielt die Animation über einem unvollständigen Bildschirm und wirkt langsam. Die API kleidet eine bereits fertige Navigation ein; sie ersetzt weder einen Ladezustand noch eine Warteanzeige.

Mit diesen Reflexen getestet, hält die API, was sie verspricht: Sie macht eine Oberfläche lesbarer, ohne Schulden aufzubauen, und zieht sich dort von selbst zurück, wo der Browser noch nicht mitzieht.

#Stand der Unterstützung und Einführungsstrategie

Übergänge innerhalb einer Seite erreichten im Oktober 2025 den Baseline-Status und funktionieren in den wichtigsten Browsern. Übergänge zwischen Seiten sind in Chromium-Browsern und in aktuellem Safari verfügbar, während Firefox noch daran arbeitet. Da die API sauber degradiert, spricht nichts dagegen, sie schon heute als progressive Verbesserung einzusetzen.

#Was bleibt

View Transitions deckt zwei Bedürfnisse mit einer einzigen Grammatik ab: eine DOM-Aktualisierung in einer Single-Page-App zu animieren und die Navigation zwischen klassischen Seiten zu glätten. Die erste Variante ist breit verfügbar, die zweite schreitet schnell voran. In beiden Fällen verbessert die API nur das Bestehende, ohne es zu brechen, was sie zum idealen Kandidaten für eine vorsichtige Einführung macht: dort einbauen, wo sie Klarheit schafft, dort abschalten, wo Bewegung stört.

#Zum Weiterlesen

Referenzdokumentation, MDN Web Docs: developer.mozilla.org — View Transition API

#Auch auf Mail Studio

• CSS Anchor Positioning: Menüs, Tooltips und Popovers ohne JavaScript
• Design Tokens in CSS: die Methode für ein wartbares helles/dunkles Design