CSS View Transition Generator
Simulieren Sie 'View Transition API'-Animationen und CSS
(::view-transition-old/new) direkt im Browser.
Voreinstellung wählen
Vorschau
Generator-Einstellungen
※ Endpunkt (To) für ::view-transition-old (austretender Zustand)
※ Startpunkt (From) für ::view-transition-new (eintretender Zustand)
Generierter Code
Das könnte dir auch gefallen
CSS View Transition Generator Übersicht
Ein kostenloses Entwicklertool, mit dem Sie nahtlose Seitenübergangsanimationen visuell erstellen und in Ihrem Browser testen können.
Bisher waren komplexe JS-Bibliotheken nötig. Jetzt reicht CSS. Passen Sie Translation, Skalierung und mehr an und kopieren Sie den Code für SPA/MPA.
Die Verarbeitung erfolgt lokal in Ihrem Browser, ohne Server-Uploads. Garantiert 100% Privatsphäre.
Wie man Übergangsanimationen erstellt
Voreinstellung oder Basiseinstellungen wählen
Wählen Sie eine Voreinstellung wie 'Fade' oder 'Slide Left', oder geben Sie einen 'view-transition-name' ein.
Animationen voranzeigen und anpassen
Klicken Sie auf 'Abspielen / Status umschalten'. Passen Sie Parameter im Reiter 'Old' (Austritt) und 'New' (Eintritt) an.
Code kopieren und anwenden
Kopieren Sie den generierten Code aus den CSS-, JavaScript- und HTML-Reitern in Ihr Projekt.
View Transition Glossar
- View Transition API
- Ein Mechanismus, bei dem der Browser Screenshots des DOM vor und nach einer Änderung erfasst und dazwischen animiert.
- view-transition-name
- CSS-Eigenschaft zur Identifizierung von Elementen. Elemente mit demselben Namen im alten und neuen DOM werden verknüpft.
- ::view-transition-old / new
- `old` ist ein Pseudoelement für den alten Zustand (Austritt). `new` ist für den neuen Zustand (Eintritt).
- Cross-document View Transitions
- Ermöglicht Übergänge zwischen MPAs per Meta-Tag, ohne JS-SPA zu benötigen.
Häufig gestellte Fragen (FAQ)
- Q.Werden meine Daten an einen Server gesendet?
- Nein, dieses Tool läuft vollständig in Ihrem Browser. Keine Ihrer Daten wird an externe Server gesendet. Es funktioniert auch offline sicher.
- Q.Funktioniert die Animation in allen Browsern?
- Sie wird in Chrome 111+, Edge 111+, Safari 18+ usw. unterstützt. In nicht unterstützten Browsern wie Firefox gibt es ein sicheres Fallback (Progressive Enhancement) ohne Ihr Layout zu zerstören.
- Q.Kann ich es für MPAs (Multi-Page Apps) verwenden?
- Ja, auf demselben Ursprung. Mit `<meta name="view-transition" content="same-origin" />` im HTML `<head>` und CSS `view-transition-name` funktioniert es ganz ohne JavaScript.
- Q.Was soll ich für view-transition-name verwenden?
- Geben Sie einen eindeutigen String innerhalb der Seite an. Wenn derselbe Name mehrmals im DOM existiert, schlägt die Animation fehl.
Anwendungsfälle
Typische Beispiele für die Verwendung der View Transition API.
Produktdetails im E-Commerce
Klicken Sie auf ein Thumbnail, und das Bild erweitert sich nahtlos auf die Detailseite.
Native App-ähnliche UI-Flows
Erreichen Sie flüssige App-Animationen im Browser. Perfekt für PWAs.
Dark Mode Umschaltung
Statt sofort dunkel zu werden, fügen Sie einen sich ausdehnenden Farbkreis hinzu.
Sortieren und Filtern von Listen
Herausgefilterte Elemente verschwinden, während die verbleibenden an ihre neue Position gleiten.
Feedback senden
Teilen Sie Ihre Gedanken mit, um das Tool zu verbessern.
Feedback ist vorübergehend ausgesetzt
Der Server ist ausgelastet oder der Spam-Schutz ist aktiv. Bitte versuchen Sie es später erneut.