Accordion Expand-Collapse (Akkordeon)

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.

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.

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.

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 Panel gleitet vom unteren Rand herein, oft ziehbar und an festen Höhen einrastend.

Füge bei [wo] ein „Bottom Sheet Slide-Up“ hinzu (auch bottom drawer oder sheet genannt).
Das Panel soll vom unteren Rand hochgleiten, während die Seite dahinter abdunkelt, und weich abbremsend ohne Nachfedern an seinem Platz ankommen.
Spiel es bei jedem Öffnen einmal ab, lass es beim Schließen wieder nach unten gleiten und halte den Tastaturfokus im Sheet, solange es offen ist.

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.