jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-Tools

Kostenlose View Transition Builder

Generate View Transitions API CSS and JavaScript for smooth page and element transitions. Same-document (SPA) and cross-document (MPA) support with reduced-motion fallback.

Tool wird geladen...

Was ist View Transition Builder?

Die View Transitions API erzeugt sanfte animierte Ubergange beim Navigieren zwischen Seiten oder beim Aktualisieren von Seiteninhalten. Der Browser erstellt Schnappschusse des alten und neuen Zustands und blendet zwischen ihnen uber. Sie konnen view-transition-name bestimmten Elementen zuweisen, um sie wahrend des Ubergangs unabhangig zu animieren. Fur Same-Document-Ubergange (SPAs) verwenden Sie document.startViewTransition(). Fur Cross-Document-Ubergange (MPAs) fugen Sie ein Meta-Tag hinzu.

Kurze Antwort

Verwenden Sie die View Transitions API fur sanfte Seiten- und Elementanimationen. Fur SPAs: document.startViewTransition(() => updateDOM()). Fur MPAs: fugen Sie <meta name="view-transition" content="same-origin"> in den head ein. Weisen Sie view-transition-name zu Elementen fur unabhangige Animationen zu. Respektieren Sie immer prefers-reduced-motion.

Last updated: 2026-05-28

Einschränkungen

  • Cross-Document-Ubergange (MPA) funktionieren nur zwischen Seiten desselben Ursprungs. Ursprungsubergreifende Navigation lost keinen View-Ubergang aus, selbst mit dem Meta-Tag.
  • Der Browser erstellt statische Schnappschusse des alten und neuen Zustands. Live-Inhalte wie Videos, Animationen oder sich ständig aktualisierende Elemente konnen wahrend des Ubergangs eingefroren erscheinen.
  • View Transitions sind Baseline 2025: Chrome 111+, Edge 111+, Safari 18.2+. Die Firefox-Unterstutzung befindet sich in Entwicklung. Nicht unterstutzende Browser navigieren ohne Animation -- die Funktion degradiert anmutig.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Wahlen Sie den Ubergangstyp: Same-Document (fur SPA-Inhaltsaktualisierungen) oder Cross-Document (fur MPA-Seitennavigation).
  2. Legen Sie Animationsdauer, Beschleunigung und view-transition-name fur Elemente fest, die unabhangig animieren sollen.
  3. Passen Sie optional die Pseudo-Elemente ::view-transition-new und ::view-transition-old an.
  4. Kopieren Sie CSS und JavaScript/Meta-Tag. Aktivieren Sie den prefers-reduced-motion-Fallback fur Barrierefreiheit.

Wofür du es nutzen kannst

  • Ein Hero-Bild zwischen einer Listenseite und einer Detailseite mit demselben view-transition-name auf beiden Seiten animieren.
  • Einen sanften Uberblendungseffekt beim Navigieren zwischen Seiten in einer statischen Site durch Hinzufugen des View-Transition-Meta-Tags erstellen.
  • Einen Galeriefilter animieren: Rufen Sie startViewTransition() auf, bevor Sie das Bildraster fur eine sanfte Layoutanderung aktualisieren.

Anwendungsfalle

Praxisbeispiele

Beispiel

Hero-Bild-Morph zwischen Seiten

Ein Blog hat ein Hero-Bild auf der Listenseite und eine groBere Version auf der Artikelseite. Geben Sie beiden Bildern denselben view-transition-name: hero-image. Der Browser animiert das Bild wahrend der Navigation von seiner Listenposition zur Artikelposition.

Beispiel

SPA-Inhaltsaustausch

Ein Dashboard filtert eine Datentabelle. Umfassen Sie das Filter-Update mit document.startViewTransition(() => updateTable()). Die alten Tabellenzeilen blenden aus, wahrend neue Zeilen einblenden -- kein manueller Animationscode erforderlich.

Haufige Fehler

  • Zwei Elementen denselben view-transition-name auf derselben Seite zu geben -- Namen mussen pro Seite eindeutig sein. Der Browser wirft einen Fehler und uberspringt den Ubergang.
  • Das Meta-Tag im Seiten-head fur MPA-Ubergange zu vergessen -- Cross-Document-Ubergange funktionieren ohne es nicht.
  • prefers-reduced-motion nicht zu behandeln -- Benutzer mit Bewegungssensitivitat sollten sofortige Ubergange anstelle von Animationen erhalten.

Überprüfung

  1. Testen Sie den Ubergang durch Navigieren zwischen Seiten oder Auslosen der Inhaltsaktualisierung und beobachten Sie die Animation.
  2. Uberprufen Sie, ob prefers-reduced-motion: reduce den Ubergang deaktiviert und einen sofortigen Inhaltsaustausch anzeigt.

FAQ

Fragen zu View Transition Builder

Kann ich bestimmte Elemente anstatt der gesamten Seite animieren?

Ja. Weisen Sie view-transition-name einzelnen Elementen zu (wie .hero img oder .card). Jedes benannte Element erhalt seine eigenen ::view-transition-old()- und ::view-transition-new()-Pseudo-Elemente, die Sie unabhangig animieren konnen. Elemente ohne view-transition-name nehmen an der Wurzel-Uberblendung teil.

Verwandte Tools

Weitere css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen

Auch ausprobieren

Auch ausprobieren