Container Transform

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.

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.

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 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.

Beim Ziehen eines Eintrags gleiten die anderen aus dem Weg und ordnen sich in der neuen Reihenfolge ein.

Füge bei [wo] eine „Drag-to-Reorder List“ hinzu (auch sortable list genannt).
Der gezogene Eintrag soll dem Zeiger direkt folgen und sich leicht abheben, während die anderen Einträge weich aus dem Weg gleiten; beim Loslassen soll er schnell in den nächstgelegenen Platz einrasten.
Unterstütze Touch ebenso wie Maus, und biete eine Möglichkeit, Einträge per Tastatur zu verschieben, wobei die neue Position für Screenreader angesagt wird.

Ein Seitenpanel gleitet vom linken, rechten oder oberen Rand herein und schiebt oder überdeckt den Inhalt.

Füge bei [wo] einen „Drawer Slide“ hinzu (auch off-canvas oder side sheet genannt).
Das Panel soll vom seitlichen Rand über den Inhalt hereingleiten, während die Seite dahinter abdunkelt, schnell und weich abbremsend, und beim Schließen auf demselben Weg wieder hinausgleiten.
Halte den Tastaturfokus im offenen Drawer, schließ ihn mit Escape oder einem Klick auf den abgedunkelten Bereich und gib den Fokus an den Button zurück, der ihn geöffnet hat.

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.