Crossfade Page Transition

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.

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

Füge bei [wo] einen „Fade Through“-Seitenübergang hinzu (auch Fade-Through Transition oder Out-In Route Transition genannt).
Zuerst soll der ausgehende Inhalt schnell und vollständig ausblenden, danach der neue Inhalt einblenden und dabei leicht auf seine Größe anwachsen.
Lass die beiden nie überlappen und verhindere, dass sich das Layout des neuen Inhalts beim Skalieren verschiebt.

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.

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.

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

Füge bei [wo] einen „Curtain / Panel Wipe“-Seitenübergang hinzu (auch Page Wipe oder Staggered Panels genannt).
Massive Paneele sollen nacheinander hereinwischen und die alte Seite verdecken, die Seite soll wechseln, während sie ganz verdeckt ist, und die Paneele sollen dann weiter aus dem Bild ziehen und die neue freigeben: kraftvoll und flüssig.
Zeige die neue Seite nie, bevor die Paneele die alte verdeckt haben, und nutze bei reduzierter Bewegung (prefers-reduced-motion) stattdessen 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.