Fade Through

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

Füge bei [wo] eine „Crossfade Page Transition“ hinzu (auch Cross-Dissolve oder Fade Transition genannt).
Beim Navigieren soll die alte Seite ausblenden, während die neue gleichzeitig im selben Bereich einblendet: weich und recht schnell.
Halte beide Seiten an derselben Stelle, damit sich während der Überblendung nichts verschiebt, und setze den Fokus nach dem Wechsel auf die Hauptüberschrift der neuen Seite.

Die Slides bleiben an ihrem Platz und blenden ineinander über, statt zu gleiten.

Füge bei [wo] einen „Carousel Crossfade“ hinzu (auch fade slideshow oder carousel fade genannt).
Die Slides sollen an ihrem Platz bleiben und langsam ineinander überblenden – die alte blendet aus, während die nächste gleichzeitig einblendet – und dann ein paar Sekunden stehen bleiben bis zum nächsten Wechsel.
Springe nahtlos zurück zur ersten Slide, pausiere bei Hover oder Fokus und wechsle bei reduzierter Bewegung (prefers-reduced-motion) nicht automatisch weiter.

Das Element geht an seinem Platz von völlig transparent zu völlig deckend über, beim Verlassen umgekehrt.

Füge bei [wo] eine „Fade In / Fade Out“-Animation hinzu (auch fade genannt).
Das Element soll beim Erscheinen an seinem Platz von völlig transparent zu völlig sichtbar übergehen und beim Verschwinden genauso wieder ausblenden: sanft, ohne Bewegung oder Skalierung.
Sorge dafür, dass es nach dem Ausblenden weder anklickbar noch per Tastatur erreichbar ist, und wechsle bei reduzierter Bewegung (prefers-reduced-motion) sofort.

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

Füge bei [wo] eine „Zoom Page Transition“ hinzu (auch Scale Transition oder Zoom In / Out genannt).
Beim Hineinnavigieren soll die alte Seite leicht größer werden und ausblenden, während die neue von etwas kleiner auf ihre Größe anwächst; beim Zurückgehen soll sie umgekehrt herauszoomen: weich und schnell.
Halte die Skalierung dezent, damit der Inhalt durchgehend lesbar bleibt, und nutze bei reduzierter Bewegung (prefers-reduced-motion) eine einfache Überblendung.

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

Füge bei [wo] einen „Preloader Curtain Lift“ hinzu (auch Splash Screen oder Intro Loader genannt).
Eine bildschirmfüllende Intro-Ebene soll stehen bleiben, während sich ein Ladebalken füllt, und dann sanft nach oben weggleiten, um die Website freizugeben, die darunter weich an ihren Platz rückt.
Spiele ihn nur beim ersten Laden ab, halte die Seite nie länger auf, als das Laden tatsächlich dauert, und lass ihn bei reduzierter Bewegung (prefers-reduced-motion) weg.

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

Füge bei [wo] einen „Shared Axis“-Seitenübergang hinzu (auch Shared Axis X/Y/Z genannt).
Beim Vorwärtsgehen soll der alte Inhalt ein kurzes Stück zur Seite gleiten und schnell ausblenden, während der neue von der anderen Seite hereingleitet und kurz danach einblendet; beim Zurückgehen kehrt sich die Richtung um.
Halte den Weg kurz, damit er die Richtung nur andeutet, und passe die Achse an die Navigation an: seitlich für Geschwisterseiten, vertikal für Schritte, Tiefe für Drill-down.

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

Füge bei [wo] eine „Shared Element Transition“ hinzu (auch Hero Transition oder view-transition-name morph genannt).
Beim Wechsel zur nächsten Seite soll das passende Element, etwa ein Vorschaubild, sanft an seinen Platz auf der neuen Seite gleiten und wachsen, während der übrige Inhalt überblendet, und beim Zurückgehen wieder schrumpfen.
Gib den passenden Elementen auf beiden Seiten eine gemeinsame Identität, damit sie richtig zusammenfinden, und nutze eine einfache Überblendung, wo der Browser sie nicht verwandeln kann.