Bounce In

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 springt aus einem kleinen, gedrehten Zustand hervor, schießt über und pendelt sich ein wie ein Springteufel.

Füge bei [wo] eine „Jack In The Box“-Einblendanimation hinzu.
Das Element soll aus einem winzigen, schräg gestellten Zustand an seiner Unterkante verankert hochschnellen, über die Senkrechte hinaus hin und her schaukeln und sich dann einpendeln: federnd und verspielt.
Spiele sie nur einmal ab und zeige das Element bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation an seinem Platz an.

Das Element wächst aus einem kleinen, transparenten Zustand auf volle Größe und blendet dabei ein.

Füge bei [wo] eine „Zoom In“-Einblendanimation hinzu (auch scale in genannt).
Das Element soll von klein und transparent auf volle Größe wachsen und dabei einblenden: schnell und weich, ohne Überschwingen.
Skaliere es von der Mitte aus, ohne das umgebende Layout zu beeinflussen, und zeige es bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation an seinem Platz an.

Das Element skaliert mit elastischem Überschwingen, wenn das Hovern beginnt oder endet.

Füge bei [wo] einen „Bounce Scale“-Hover-Effekt hinzu (auch bounce in / out genannt).
Das Element soll sich federnd und sichtbar überschwingend etwas vergrößern, kurz über seine Endgröße hinausgehen und sich dann setzen, und beim Verlassen genauso zurückfedern.
Verhindere, dass sich das umgebende Layout verschiebt, und zeige denselben Effekt beim Tastaturfokus.

Das Element federt leicht nach und schrumpft dann oder fliegt zu einem Rand hinaus.

Füge bei [wo] eine „Bounce Out“-Ausblendanimation hinzu.
Das Element soll kurz leicht einsinken, etwas über seine Größe hinaus anschwellen und dann schrumpfend ausblenden: kurz und federnd.
Nimm es erst nach dem Ende der Animation aus dem Layout und blende es bei reduzierter Bewegung (prefers-reduced-motion) sofort aus.

Ein clip-path oder eine Maske wächst von einem Rand oder Punkt aus und legt Bild oder Text nach und nach frei.

Füge bei [wo] einen „Clip Reveal“-Einblendeffekt hinzu (auch mask reveal, wipe reveal oder image reveal genannt).
Eine Schnittkante soll von links nach rechts darüberstreichen und den Inhalt nach und nach freilegen, während er selbst stillsteht: gleichmäßig, mit weichem Anfang und Ende.
Reserviere den Platz des Elements von Anfang an, damit sich nichts verschiebt, und zeige es bei reduzierter Bewegung (prefers-reduced-motion) vollständig freigelegt an.

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.