Toast Slide-In

Das Element gleitet von jenseits des Containerrands an seine Ruheposition, ohne einzublenden.

Füge bei [wo] eine „Slide In“-Einblendanimation hinzu (auch slide in left, slide in right, slide in up oder slide in down genannt).
Das Element soll von jenseits des Containerrands an seinen Platz gleiten und dabei die ganze Zeit voll deckend bleiben: schnell, sanft abbremsend, ohne Nachfedern.
Schneide es am Containerrand ab, damit es Nachbarelemente nicht überlappt und keine Scrollleisten erzeugt, solange es draußen ist, und zeige es bei reduzierter Bewegung (prefers-reduced-motion) direkt an seinem Platz an.

Ein kleines Label blendet nach kurzer Hover-Verzögerung neben einem Element ein und rückt dabei leicht an seinen Platz.

Füge bei [wo] einen „Tooltip Fade“ hinzu (auch Tooltip Reveal genannt).
Nach einer kurzen Hover-Verzögerung soll das Label einblenden und dabei leicht neben das Element rücken, dann ohne Verzögerung schnell verschwinden, sobald der Zeiger es verlässt.
Zeige ihn auch bei Tastaturfokus, lass ihn mit Escape schließen und verknüpfe ihn mit dem Element, damit Screenreader ihn vorlesen.

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.

Das Element blendet ein und gleitet dabei ein kurzes Stück von einer Seite an seine endgültige Position.

Füge bei [wo] eine „Fade In Directional“-Einblendanimation hinzu (auch fade in left, fade in right oder fade in down genannt).
Das Element soll einblenden und dabei ein kurzes Stück von einer Seite an seine endgültige Position gleiten: schnell und fließend, beim Ankommen abbremsend, ohne Nachfedern.
Spiele sie nur einmal ab und zeige das Element bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation an seinem Platz an.

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.