Zoom Page Transition

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.

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.

Ein Dialog blendet über der abgedunkelten Seite ein und wächst dabei leicht aus seiner Mitte.

Füge bei [wo] eine „Modal Scale-Fade In“-Animation hinzu (auch dialog open animation oder zoom-fade dialog genannt).
Der Dialog soll einblenden und dabei leicht aus seiner Mitte wachsen, während die Seite dahinter abdunkelt: schnell und dezent, ohne Nachfedern.
Spiel sie bei jedem Öffnen einmal ab, setz den Fokus in den Dialog und halte ihn dort, und nutze bei reduzierter Bewegung (prefers-reduced-motion) nur ein einfaches Einblenden.

Das Element wächst aus einem kleinen, transparenten Zustand auf volle Größe und blendet dabei ein.

Füge bei [wo] eine „Zoom In“-Einblendanimation hinzu (auch scale in genannt).
Das Element soll von klein und transparent auf volle Größe wachsen und dabei einblenden: schnell und weich, ohne Überschwingen.
Skaliere es von der Mitte aus, ohne das umgebende Layout zu beeinflussen, und zeige es bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation an seinem Platz an.

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

Füge bei [wo] einen „Circular Reveal“-Übergang hinzu (auch clip-path circle expand oder theme toggle reveal genannt).
Die neue Ansicht soll in einem Kreis erscheinen, der vom gedrückten Bedienelement aus wächst, bis er die ganze Fläche bedeckt: weich und gleichmäßig, sanft beschleunigend und abbremsend.
Lass den Kreis genau dort beginnen, wo gedrückt wurde, und wechsle bei reduzierter Bewegung (prefers-reduced-motion) sofort ohne Kreis.

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.

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.