Shutter Fill

Beim Hovern dehnt sich ein Rechteck im Element aus oder zieht sich zusammen und ändert so den Hintergrund.

Füge bei [wo] einen „Rectangle Fill“-Hover-Effekt hinzu.
Die neue Hintergrundfarbe soll sich von allen vier Kanten her schließen, während ein inneres Rechteck zur Mitte schrumpft, und sich beim Verlassen des Zeigers wieder öffnen, während die Beschriftung die Farbe wechselt, um lesbar zu bleiben: weich und schnell.
Halte die Beschriftung über der Füllung und zeige denselben Effekt beim Tastaturfokus.

Ein farbiger Hintergrund wischt beim Hovern von einer Kante aus über das Element.

Füge bei [wo] einen „Background Sweep“-Hover-Effekt hinzu (auch background fill oder slide fill genannt).
Eine neue Hintergrundfarbe soll von der linken zur rechten Kante darüberwischen, weich und schnell, ohne Nachfedern, und sich beim Verlassen genauso zurückziehen, während die Textfarbe wechselt, damit alles lesbar bleibt.
Beschneide die Füllung auf die Form des Elements und zeige denselben Effekt beim Tastaturfokus.

Beim Hovern wächst ein farbiger Kreis aus der Mitte oder schrumpft zu ihr hin, um das Element zu füllen.

Füge bei [wo] einen „Radial Fill“-Hover-Effekt hinzu (auch circle expand genannt).
Ein Kreis in der neuen Farbe soll sanft aus der Mitte wachsen, bis er das Element füllt, und beim Verlassen des Zeigers zur Mitte zurückschrumpfen, während die Beschriftung die Farbe wechselt, um lesbar zu bleiben.
Beschneide den Kreis auf die Form des Elements, halte die Beschriftung darüber und zeige denselben Effekt beim Tastaturfokus.

Massive Paneele wischen über den Bildschirm, verdecken die alte Seite und ziehen sich dann zurück, um die neue freizugeben.

Füge bei [wo] einen „Curtain / Panel Wipe“-Seitenübergang hinzu (auch Page Wipe oder Staggered Panels genannt).
Massive Paneele sollen nacheinander hereinwischen und die alte Seite verdecken, die Seite soll wechseln, während sie ganz verdeckt ist, und die Paneele sollen dann weiter aus dem Bild ziehen und die neue freigeben: kraftvoll und flüssig.
Zeige die neue Seite nie, bevor die Paneele die alte verdeckt haben, und nutze bei reduzierter Bewegung (prefers-reduced-motion) stattdessen eine einfache Überblendung.

Beim Hovern rutscht das Element ein paar Pixel nach unten, als würde es in die Seite gedrückt.

Füge bei [wo] einen „Sink“-Hover-Effekt hinzu.
Das Element soll ein wenig nach unten rutschen und dort bleiben, solange der Zeiger darüber ist, als würde es in die Seite gedrückt, und beim Verlassen wieder hochkommen: weich, ohne Nachfedern.
Verschiebe es nur optisch, ohne das umgebende Layout zu bewegen, und zeige denselben Effekt beim Tastaturfokus.

Das Element neigt sich beim Hovern seitlich schräg.

Füge bei [wo] einen „Skew“-Hover-Effekt hinzu.
Das Element soll sich seitlich in eine leichte Schräglage neigen, solange der Zeiger darüber ist, und sich beim Verlassen wieder aufrichten: schnell und weich.
Halte den Text in der Schräglage lesbar, verhindere, dass sich das umgebende Layout verschiebt, und zeige denselben Effekt beim Tastaturfokus.

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.