Tooltip Fade

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.

Beim Hovern erscheint an einer Seite des Elements ein kleines Sprechblasen-Dreieck.

Füge bei [wo] einen Sprechblasen-Hover-Effekt (Speech Bubble) hinzu, auch bubble genannt.
Ein kleiner dreieckiger Zipfel soll hinter einer Seite des Elements hervorgleiten und es zur Sprechblase machen, und beim Verlassen wieder zurückgleiten: schnell und weich.
Gib dem Zipfel dieselbe Farbe wie dem Element, damit beide als eine Form wirken, und zeige denselben Effekt beim Tastaturfokus.

Eine kurze Meldung gleitet oder blendet am Bildschirmrand ein, bleibt kurz und verschwindet dann; gestapelte Toasts rücken zur Seite, um Platz zu machen.

Füge bei [wo] einen „Toast Slide-In“ hinzu (auch Snackbar oder Toast Notification genannt).
Jede Meldung soll vom Bildschirmrand hochgleiten und dabei einblenden, sanft abbremsend; kommt ein neuer Toast hinzu, sollen die bereits sichtbaren sanft zur Seite rücken, um Platz zu machen.
Kündige die Meldung für Screenreader an, ohne den Fokus zu stehlen, lass sie lange genug zum Lesen stehen und pausiere das automatische Schließen bei Hover oder Fokus.

Ein Inhaltsbereich wächst beim Umschalten seiner Kopfzeile weich auf volle Höhe oder schrumpft auf null.

Füge bei [wo] ein Akkordeon (Accordion Expand-Collapse) hinzu, auch collapse oder disclosure genannt.
Wenn eine Kopfzeile gedrückt wird, soll ihr Bereich weich auf die volle Höhe seines Inhalts wachsen und beim nächsten Drücken wieder ganz zuklappen, während sich der Pfeil in der Kopfzeile passend dreht: schnell und weich, ohne Nachfedern.
Animiere auf die echte Höhe des Inhalts statt auf einen festen Schätzwert, mach die Kopfzeile zu einem echten Button, der seinen aufgeklappten Zustand angibt, und sorg dafür, dass alles per Tastatur funktioniert.

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.