Zoom In

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.

Das Element schrumpft aus einem großen, unscharfen, transparenten Zustand in die Schärfe wie eine Rauchwolke, beim Verlassen umgekehrt.

Füge bei [wo] eine „Puff In / Puff Out“-Animation hinzu (auch puff genannt).
Beim Erscheinen soll das Element aus einem großen, unscharfen, transparenten Zustand in die Schärfe schrumpfen wie eine Rauchwolke, die sich legt; beim Verschwinden soll es wieder zu einer Unschärfe anschwellen und verschwinden: weich und recht schnell.
Achte darauf, dass der vergrößerte Zustand das Layout nicht verschiebt oder Scrollleisten erzeugt, und wechsle bei reduzierter Bewegung (prefers-reduced-motion) sofort.

Das Element startet verkleinert und versetzt, gleitet dann herein und wächst auf volle Größe.

Füge bei [wo] eine „Back In“-Einblendanimation hinzu (auch back in up oder back in down genannt).
Das Element soll verkleinert und leicht transparent von jenseits eines Rands hereinkommen und erst an seinem Platz auf volle Größe wachsen: eine bewusste Bewegung in zwei Schritten, kein schnelles Aufploppen.
Spiele sie nur einmal ab und zeige das Element bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation an seinem Platz an.

Das Element vergrößert sich weich ein wenig, solange der Zeiger darüber ist.

Füge bei [wo] einen „Grow“-Hover-Effekt hinzu (auch scale up genannt).
Das Element soll sich weich ein wenig vergrößern, solange der Zeiger darüber ist, und beim Verlassen wieder schrumpfen: schnell und dezent.
Verhindere, dass sich das umgebende Layout verschiebt, und zeige denselben Effekt beim Tastaturfokus.

Das Element schrumpft und blendet aus, bis es verschwindet.

Füge bei [wo] eine „Zoom Out“-Ausblendanimation hinzu (auch scale out genannt).
Das Element soll zur Mitte hin schrumpfen und dabei ausblenden, bis es verschwindet: schnell, zum Ende hin beschleunigend.
Nimm es erst aus dem Layout und dem Tastaturfokus, wenn es verschwunden ist, und blende es bei reduzierter Bewegung (prefers-reduced-motion) sofort aus.

Das Element schrumpft und gleitet zu einem Rand hinaus, während es ausblendet.

Füge bei [wo] eine „Back Out“-Ausblendanimation hinzu.
Das Element soll zuerst an seinem Platz leicht schrumpfen und dann zu einem Rand hinausgleiten, während es ausblendet: ein bewusster Abgang in zwei Schritten, kein einzelnes schnelles Ausblenden.
Entferne das Element erst nach dem Ende der Animation, damit das Layout nicht mitten in der Bewegung springt, und entferne es bei reduzierter Bewegung (prefers-reduced-motion) sofort.