Die View Transitions API: weiche Seiten- und Zustandsübergänge

Die View Transitions API animiert den Wechsel zwischen zwei Zuständen einer Seite — eine Liste, die zu einer Detailansicht wird, ein umgeschaltetes Theme, ein herausgefiltertes Element — mit fast keinem Animationscode. Der Browser macht einen Schnappschuss des alten Zustands, einen Schnappschuss des neuen und blendet (oder transformiert) für dich zwischen ihnen über.

Übergänge im selben Dokument

Bei Zustandsänderungen innerhalb einer einzigen Seite — einer Single-Page-App, die das DOM aktualisiert — umschließe die DOM-Aktualisierung mit document.startViewTransition():

function showDetail(item) {
  if (!document.startViewTransition) {
    updateDOM(item); // no support: just update, no animation
    return;
  }
  document.startViewTransition(() => updateDOM(item));
}

Der Callback erledigt deine normale DOM-Arbeit. Der Browser erfasst einen „Vorher"-Schnappschuss kurz bevor er läuft und einen „Nachher"-Schnappschuss, sobald er fertig ist, und animiert dann zwischen ihnen. Der Standard ist eine sanfte Überblendung — schon ein schönes Upgrade gratis.

Die Animation mit CSS anpassen

Während eines Übergangs baut der Browser einen Baum aus Pseudo-Elementen auf, den du stylen kannst. Der einfachste Ansatzpunkt ist die Root-Übergangsgruppe:

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
}

Du visierst den ausgehenden Schnappschuss mit ::view-transition-old() an und den eingehenden mit ::view-transition-new(), dann wendest du jede beliebige CSS-Animation an.

Ein bestimmtes Element über Zustände hinweg animieren

Damit ein Element sich zwischen den beiden Zuständen scheinbar bewegt und verwandelt — ein Thumbnail, das zu einem vollen Bild wächst — gib ihm in beiden Zuständen einen gemeinsamen view-transition-name:

.hero-image {
  view-transition-name: hero;
}

Der Name muss zu jedem Zeitpunkt auf der Seite eindeutig sein. Wenn der Browser denselben Namen vorher und nachher findet, interpoliert er Position und Größe dieses Elements direkt, statt es überzublenden, und erzeugt so einen durchgehenden „Shared-Element"-Effekt.

Dokumentübergreifende Übergänge (MPA)

Mehrseitige Sites können auch zwischen vollständigen Seitennavigationen übergehen, ganz ohne JavaScript. Aktiviere es per CSS auf beiden Seiten:

@view-transition {
  navigation: auto;
}

Mit dieser einen Regel animieren Navigationen auf derselben Origin automatisch. Übereinstimmende view-transition-name-Werte auf beiden Seiten lassen ein Element — etwa das Hero-Bild eines Beitrags — von der Listenseite zur Artikelseite übertragen werden.

Schnellreferenz

Ziel	API
SPA-Zustandsänderung	document.startViewTransition(cb)
MPA-Navigation	@view-transition { navigation: auto }
Die Überblendung stylen	::view-transition-old/new(root)
Shared Element	view-transition-name (eindeutig)

Support und Progressive Enhancement

Übergänge im selben Dokument sind in Chromium-Browsern und Safari verfügbar; die dokumentübergreifende Unterstützung wird ausgerollt und Firefox implementiert beide. Weil du mit if (!document.startViewTransition) absicherst und die dokumentübergreifende Version ein reines CSS-Opt-in ist, baut die API sanft ab: nicht unterstützte Browser aktualisieren die Seite einfach ohne Animation. Das macht es sicher, sie heute als Progressive Enhancement hinzuzufügen.

Greife zu View Transitions, wenn sich ein Sprung zwischen Zuständen abrupt anfühlt. Ein kleines Maß an Bewegung gibt Nutzern ein Gefühl von Kontinuität — woher die Dinge kamen und wohin sie gingen — ohne dass du in den meisten Fällen einen einzigen Keyframe von Hand schreibst.