Backdrop Scrim Fade

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.

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.

Das Element geht an seinem Platz von völlig transparent zu völlig deckend über, beim Verlassen umgekehrt.

Füge bei [wo] eine „Fade In / Fade Out“-Animation hinzu (auch fade genannt).
Das Element soll beim Erscheinen an seinem Platz von völlig transparent zu völlig sichtbar übergehen und beim Verschwinden genauso wieder ausblenden: sanft, ohne Bewegung oder Skalierung.
Sorge dafür, dass es nach dem Ausblenden weder anklickbar noch per Tastatur erreichbar ist, und wechsle bei reduzierter Bewegung (prefers-reduced-motion) sofort.

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

Slides ziehen horizontal durch einen sichtbaren Ausschnitt und rasten jeweils eine nach der anderen ein.

Füge bei [wo] ein „Carousel Slide“ hinzu (auch slider oder swipe carousel genannt).
Jeder Schritt soll die Reihe seitwärts schieben, sodass die nächste Slide in der Mitte einrastet, weich und abbremsend, während die Nachbarn an den Rändern hervorschauen und die Positionspunkte mitgehen.
Bewege immer eine Slide auf einmal, unterstütze Wischen auf Touch-Geräten ebenso wie Buttons und Pfeiltasten, und beschrifte die Steuerelemente für Screenreader.