Modal Scale-Fade In

Ein schwebendes Menü blendet ein und wächst dabei von der Stelle aus, an der sein Auslöser sitzt.

Füge bei [wo] eine „Popover / Dropdown Open“-Animation hinzu (auch menu pop oder dropdown scale-fade genannt).
Das Menü soll einblenden und dabei leicht aus der Ecke neben seinem Auslöser herauswachsen, schnell und knackig, und beim Schließen etwas schneller ausblenden.
Halte es am Auslöser verankert, schließe es mit Escape oder einem Klick außerhalb und gib den geöffneten Zustand am Auslöser für Screenreader an.

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.

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.

Eine durchscheinende dunkle Ebene blendet hinter einem Overlay ein und dunkelt die Seite ab.

Füge bei [wo] einen „Backdrop Scrim Fade“ hinzu (auch overlay fade oder scrim genannt).
Wenn das Overlay aufgeht, soll eine durchscheinende dunkle Ebene sanft über der Seite dahinter einblenden, etwas langsamer als das Overlay selbst, und beim Schließen wieder ausblenden.
Halte den Scrim im hellen wie im dunklen Theme dunkel und verhindere, dass die Seite dahinter scrollt oder Klicks annimmt, solange er sichtbar ist.

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.

Eine Unterstreichung oder Pille gleitet vom alten Tab zum neu ausgewählten Tab.

Füge bei [wo] einen „Tab Indicator Slide“ hinzu (auch sliding underline oder active tab indicator genannt).
Wird ein neuer Tab gewählt, soll die Unterstreichung vom alten zum neuen Tab gleiten, schnell und sanft abbremsend, und sich an die Breite des neuen Tabs anpassen, falls sie abweicht.
Behalte eine korrekte Tab-Semantik mit Navigation per Pfeiltasten bei und setze den Indikator bei reduzierter Bewegung (prefers-reduced-motion) ohne Gleiten um.