TL;DR: Die View Transitions API bringt butterweiche Seitenuebergaenge direkt in den Browser - ganz ohne Framework, ganz ohne JavaScript-Bibliothek. Einfach CSS und ein paar Zeilen JS. Hier erfaehrst du, wie das funktioniert und warum du es sofort ausprobieren solltest.

🤔 Was sind View Transitions ueberhaupt?

Kennst du das? Du klickst auf einen Link und - zack - die Seite springt. Kein Uebergang, kein Fading, einfach ein harter Cut. Das fuehlt sich an wie 2005. Native Apps machen das besser: Dort gleiten Seiten elegant ineinander ueber, Bilder morphen von einer Ansicht zur naechsten.

Genau das ist das Problem, das die View Transitions API loest. Sie gibt dir die Moeglichkeit, animierte Uebergaenge zwischen verschiedenen Zustaenden deiner Seite zu erstellen - und das nativ im Browser. Kein Angular, kein React, kein Framer Motion. Einfach die Platform nutzen.

😩 Das Problem: Seitennavigation fuehlt sich kaputt an

Lass uns ehrlich sein: Multi-Page-Applications (MPAs) fuehlen sich im Vergleich zu nativen Apps immer etwas... ruckelig an. Jeder Seitenwechsel ist ein kompletter Neuaufbau. Der Browser laedt HTML, parst CSS, rendert alles neu. Das Ergebnis? Ein weisser Blitz, ein Sprung, eine Unterbrechung im Flow.

Single-Page-Applications (SPAs) haben das mit Client-Side-Routing geloest - aber zu einem hohen Preis: JavaScript-Bundles, Framework-Abhaengigkeiten, Komplexitaet. Die View Transitions API bietet einen Mittelweg.

🚀 Same-Document Transitions mit document.startViewTransition()

Der einfachste Einstieg: Transitions innerhalb einer Seite. Stell dir vor, du hast Tabs oder eine Bildergalerie. Statt einfach den Inhalt auszutauschen, kannst du den Wechsel animieren.

function switchTab(newContent) {
  // Pruefen ob die API verfuegbar ist
  if (!document.startViewTransition) {
    updateDOM(newContent);
    return;
  }

  // View Transition starten
  document.startViewTransition(() => {
    updateDOM(newContent);
  });
}

function updateDOM(content) {
  document.querySelector('.tab-content').textContent = content;
}

Das war's. Ernsthaft. Der Browser macht jetzt automatisch einen Crossfade zwischen dem alten und neuen Zustand. Du musst nichts weiter tun. Der Browser erstellt Snapshots vom alten und neuen Zustand und animiert dazwischen.

🌍 Cross-Document Transitions mit @view-transition

Jetzt wird's richtig spannend. Seit Chrome 126 kannst du auch Uebergaenge zwischen verschiedenen Seiten animieren - ganz ohne JavaScript! Alles was du brauchst, ist eine CSS-Regel:

@view-transition {
  navigation: auto;
}

Ja, das ist alles. Fueg das in dein Stylesheet ein und jeder Seitenwechsel innerhalb derselben Origin bekommt automatisch einen sanften Crossfade. Keine einzige Zeile JavaScript noetig.

Wichtig: Beide Seiten (die alte und die neue) muessen diese Regel in ihrem CSS haben. Am besten packst du das in dein globales Stylesheet.

🎯 view-transition-name: Elemente gezielt animieren

Der echte Wow-Effekt kommt, wenn du einzelne Elemente zwischen Seiten miteinander verknuepfst. Stell dir eine Produktliste vor: Du klickst auf ein Thumbnail und es morpht zum grossen Bild auf der Detailseite.

/* Auf der Listenseite */
.product-card img {
  view-transition-name: product-hero;
}

/* Auf der Detailseite */
.product-detail img {
  view-transition-name: product-hero;
}

Gleicher Name = der Browser weiss, dass diese Elemente zusammengehoeren. Er berechnet automatisch die Position, Groesse und animiert dazwischen. Das Ergebnis sieht aus wie eine native App.

Wichtig: Jeder view-transition-name muss auf einer Seite einzigartig sein. Zwei Elemente mit dem gleichen Namen auf derselben Seite? Das bricht die Transition.

🎨 ::view-transition Pseudo-Elemente fuer Custom Animations

Der Browser erzeugt waehrend einer Transition einen Pseudo-Element-Baum, den du mit CSS stylen kannst:

/* Die gesamte Transition anpassen */
::view-transition-old(root) {
  animation-duration: 0.3s;
}

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

/* Spezifische Elemente anders animieren */
::view-transition-old(product-hero) {
  animation: slide-out 0.4s ease-in;
}

::view-transition-new(product-hero) {
  animation: slide-in 0.4s ease-out;
}

Die Pseudo-Elemente sind:

• ::view-transition - der Root-Container
• ::view-transition-group(name) - gruppiert alten und neuen Snapshot
• ::view-transition-image-pair(name) - enthaelt alte und neue Ansicht
• ::view-transition-old(name) - Snapshot des alten Zustands
• ::view-transition-new(name) - Snapshot des neuen Zustands

💡 Praxisbeispiel: Bildergalerie mit View Transitions

Hier ein komplettes Beispiel fuer eine Bildergalerie mit sanften Uebergaengen:

/* Basis-Setup */
@view-transition {
  navigation: auto;
}

/* Thumbnail auf der Uebersichtsseite */
.gallery-grid img {
  view-transition-name: var(--transition-name);
  object-fit: cover;
  border-radius: 8px;
}

/* Grosses Bild auf der Detailseite */
.gallery-detail img {
  view-transition-name: var(--transition-name);
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
}

// Dynamisch einzigartige Namen vergeben
document.querySelectorAll('.gallery-grid img').forEach((img, i) => {
  img.style.setProperty('--transition-name', `gallery-img-${i}`);
});

Jedes Bild bekommt einen eigenen Transition-Namen. Wenn du auf ein Bild klickst, morpht es nahtlos zur Detailansicht.

Mutation Observer: Die unsichtbare Kraft im Hintergrund deiner Webseite 🕵️

🔀 Tab-Switching mit View Transitions

Auch innerhalb einer Seite machen View Transitions Sinn. Hier ein Tab-Beispiel:

const tabs = document.querySelectorAll('.tab-button');
const content = document.querySelector('.tab-content');

tabs.forEach(tab => {
  tab.addEventListener('click', async () => {
    const newContent = await fetchTabContent(tab.dataset.tab);

    if (!document.startViewTransition) {
      content.textContent = newContent;
      return;
    }

    const transition = document.startViewTransition(() => {
      content.textContent = newContent;
    });

    // Optional: auf das Ende der Transition warten
    await transition.finished;
    console.log('Transition fertig!');
  });
});

.tab-content {
  view-transition-name: tab-panel;
}

::view-transition-old(tab-panel) {
  animation: fade-and-slide-out 0.25s ease-in;
}

::view-transition-new(tab-panel) {
  animation: fade-and-slide-in 0.25s ease-out;
}

@keyframes fade-and-slide-out {
  to {
    opacity: 0;
    transform: translateX(-20px);
  }
}

@keyframes fade-and-slide-in {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
}

✨ Custom Effects mit @keyframes

Du kannst die Standard-Crossfade-Animation komplett ersetzen. Wie waere es mit einem Slide-Effekt fuer Seitennavigation?

/* Slide-Transition fuer Seitenwechsel */
@keyframes slide-to-left {
  to {
    transform: translateX(-100%);
  }
}

@keyframes slide-from-right {
  from {
    transform: translateX(100%);
  }
}

::view-transition-old(root) {
  animation: slide-to-left 0.4s ease-in-out;
}

::view-transition-new(root) {
  animation: slide-from-right 0.4s ease-in-out;
}

/* Oder ein cooler Scale-Effekt */
@keyframes scale-down {
  to {
    transform: scale(0.9);
    opacity: 0;
  }
}

@keyframes scale-up {
  from {
    transform: scale(1.1);
    opacity: 0;
  }
}

::view-transition-old(root) {
  animation: scale-down 0.3s ease-in;
}

::view-transition-new(root) {
  animation: scale-up 0.3s ease-out;
}

Du kannst sogar prefers-reduced-motion respektieren:

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.01s;
  }
}

🛡️ Progressive Enhancement: Feature Detection

View Transitions sind das perfekte Beispiel fuer Progressive Enhancement. Browser die es nicht unterstuetzen? Bekommen einfach den normalen Seitenwechsel - ohne Fehler, ohne Fallback-Code.

// JavaScript Feature Detection
if (document.startViewTransition) {
  // View Transitions nutzen
  document.startViewTransition(() => updateContent());
} else {
  // Fallback: einfach updaten
  updateContent();
}

// Oder als Utility-Funktion
function withTransition(callback) {
  if (!document.startViewTransition) {
    callback();
    return Promise.resolve();
  }
  return document.startViewTransition(callback).finished;
}

/* CSS Feature Detection */
@supports (view-transition-name: test) {
  .animated-element {
    view-transition-name: my-element;
  }
}

Das ist das Schoene daran: Es gibt keinen Breaking Change. Entweder der Browser kann es - dann sieht's toll aus. Oder er kann es nicht - dann funktioniert alles wie vorher.

🌐 Browser-Support

Hier der aktuelle Stand (Maerz 2026):

Die Same-Document-Variante wird mittlerweile von allen modernen Browsern unterstuetzt. Cross-Document-Transitions sind in Chrome/Edge und Safari stabil, Firefox zieht nach.

⚔️ View Transitions vs. Framework-Loesungen

Wie schlagen sich View Transitions im Vergleich zu Framework-Animationen?

Klar, Framer Motion oder Angular Animations bieten mehr Kontrolle ueber komplexe Animationssequenzen. Aber fuer die allermeisten Seitenuebergaenge ist die View Transitions API die bessere Wahl: Weniger Code, bessere Performance, und es funktioniert sogar ohne JavaScript fuer Cross-Document-Transitions.

jQuery ist tot: Warum Du es sofort aus Deinen Projekten entfernen solltest 🚀

💡 Fazit

Die View Transitions API ist ein echtes Game-Changer-Feature. Sie schliesst die Luecke zwischen Web und nativen Apps - und das mit minimaler Komplexitaet. Ein paar Zeilen CSS, optional ein bisschen JavaScript, und deine Seite fuehlt sich ploetzlich wie eine native App an.

Das Beste: Es ist Progressive Enhancement in Reinform. Du fuegst es hinzu, und wer es nutzen kann, bekommt ein besseres Erlebnis. Alle anderen merken keinen Unterschied.

Also: Probier's aus. Fueg @view-transition { navigation: auto; } in dein Stylesheet ein und schau, was passiert. Du wirst ueberrascht sein, wie viel ein einfacher Crossfade ausmacht.