Shared Element Transition

Eine Karte wächst zur vollständigen Detailansicht, wobei ein einziger sichtbarer Container seine Form ändert und neue Inhalte zeigt.

Füge bei [wo] einen „Container Transform“-Übergang hinzu (auch card expand to detail oder expandable card genannt).
Wenn die Karte geöffnet wird, soll derselbe Container weich zur vollständigen Detailansicht wachsen: Der alte Inhalt blendet schnell aus, und der neue blendet ein, wenn das Wachsen fast fertig ist; beim Schließen läuft es rückwärts.
Halte es als einen durchgehenden Container statt einer Überblendung zwischen zwei getrennten Boxen, und setz den Fokus beim Öffnen in die Detailansicht.

Ein Element scheint sich in ein passendes Element an neuer Stelle zu bewegen und seine Größe anzupassen, als wäre es dasselbe.

Füge bei [wo] eine „Shared Layout Animation“ hinzu (auch In-Page Shared Element genannt).
Wenn sich die Auswahl ändert, soll das Element sanft von seiner alten Position an die neue gleiten und dabei seine Größe anpassen, weich einrastend, sodass es als ein Objekt wirkt statt als zwei.
Zeige immer nur eine Kopie und verhindere, dass das umgebende Layout während der Bewegung springt.

Ein Vorschaubild wächst von seinem Platz aus zu einer großen, zentrierten Ansicht über einem abgedunkelten Hintergrund.

Füge bei [wo] einen „Lightbox Zoom“ hinzu (auch image zoom overlay oder Medium-style zoom genannt).
Ein Klick auf ein Vorschaubild soll es sanft von seinem Platz aus zu einer großen, zentrierten Ansicht wachsen lassen, während die Seite dahinter zurücktritt; beim Schließen schrumpft es an denselben Platz zurück.
Schließe es mit Escape oder einem Klick auf den Hintergrund, setze den Fokus in die Ansicht, solange sie offen ist, und gib ihn danach an das Vorschaubild zurück.

Nach einer Layoutänderung gleiten die Elemente weich an ihre neuen Positionen und Größen.

Füge bei [wo] eine „FLIP Layout Animation“ hinzu (auch layout animation oder First-Last-Invert-Play genannt).
Wenn sich das Layout ändert, soll jedes Element von seiner alten Position zur neuen gleiten statt zu springen, anfangs schnell und dann sanft einrastend.
Animiere nur mit Transforms, damit die Seite nicht in jedem Frame neu umbricht, und wechsle bei reduzierter Bewegung (prefers-reduced-motion) direkt zum neuen Layout.

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

Füge bei [wo] eine „Slide Page Transition“ hinzu (auch Push / Pop oder Directional Slide genannt).
Beim Vorwärtsgehen soll die neue Seite von der Seite hereinschieben, während die alte zur anderen Seite hinausgleitet; beim Zurückgehen sollen sich beide in die Gegenrichtung bewegen: weich, sanft beschleunigend und abbremsend.
Kopple die Richtung an die Navigationstiefe, auch beim Zurück-Button des Browsers, und verhindere, dass die Seite während des Gleitens seitlich scrollt.

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.

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.