Page Transition

9 AnimationenErsetze [wo] durch die Stelle auf deiner Seite und füge den Prompt in deinen KI-Agenten ein. Jeder Prompt enthält den Namen der Animation – beim nächsten Mal reicht es, sie beim Namen zu nennen.

Circular Reveal

Auch genannt Clip-path circle expand, Theme toggle reveal

Die neue Ansicht erscheint in einem Kreis, der sich vom Klickpunkt aus ausdehnt.

Wechsel zwischen Hell- und Dunkelmodus, Seitenwechsel

Crossfade Page Transition

Auch genannt Cross-dissolve, Fade transition, Root cross-fade, Cross-Document View Transition, MPA view transition, @view-transition navigation auto

Die alte Seite blendet aus, während die neue im selben Bereich einblendet.

Standard-Routenwechsel

Curtain / Panel Wipe

Auch genannt Page wipe, Curtain reveal, Stripe transition, Staggered panels

Massive Paneele wischen über den Bildschirm, verdecken die alte Seite und ziehen sich dann zurück, um die neue freizugeben.

Navigation auf Portfolio- und Agenturseiten

Fade Through

Auch genannt Fade-through transition, Out-In Route Transition, Wait mode, mode="wait", mode="out-in"

Der ausgehende Inhalt blendet vollständig aus, dann blendet der neue Inhalt mit leichter Skalierung ein.

Wechsel zwischen Zielen ohne inhaltlichen Bezug

Preloader Curtain Lift

Auch genannt Splash screen, Intro loader

Eine bildschirmfüllende Intro-Ebene mit Logo oder Zähler gleitet oder blendet weg und gibt die Website frei.

Erster Seitenaufruf

Shared Axis

Auch genannt Shared axis X/Y/Z

Aus- und eingehender Inhalt bewegen sich gemeinsam entlang der X-, Y- oder Z-Achse und blenden dabei, um ihre räumliche Beziehung zu zeigen.

Stepper, Navigation zwischen Geschwisterseiten, Drill-down

Shared Element Transition

Auch genannt Hero transition, View Transition shared element, view-transition-name morph

Ein passendes Element, etwa ein Vorschaubild, verwandelt sich in Position und Größe von einer Seite zur nächsten.

Vom Vorschaubild zur Detailseite

Slide Page Transition

Auch genannt Push / pop, Directional slide, Slide-over route

Die neue Seite gleitet von einer Seite herein, während die alte hinausgleitet; die Richtung folgt der Navigationstiefe.

Vor- und Zurück-Navigation im Mobile-Stil

Zoom Page Transition

Auch genannt Scale transition, Zoom in / out

Die alte Seite skaliert größer oder kleiner und blendet aus, während die neue in ihre Größe hineinskaliert.

In eine Hierarchie hinein- oder aus ihr herausnavigieren

Ersetze [wo] durch die Stelle auf deiner Seite und füge den Prompt in deinen KI-Agenten ein. Jeder Prompt enthält den Namen der Animation – beim nächsten Mal reicht es, sie beim Namen zu nennen.