Rotate

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.

Ein Icon in einem Button dreht sich, wenn man über den Button hovert.

Füge bei [wo] einen „Icon Spin“-Hover-Effekt hinzu.
Das Icon im Element soll sich beim Eintritt des Zeigers sanft einmal ganz drehen und beim Verlassen zurückdrehen.
Drehe nur das Icon, nicht den ganzen Button, und zeige denselben Effekt beim Tastaturfokus.

Das Element schaukelt mit Neigung hin und her wie ein wackeliger Gegenstand.

Füge bei [wo] einen „Wobble“-Aufmerksamkeitseffekt hinzu.
Das Element soll mit Neigung hin und her schaukeln, zuerst mit großem Ausschlag, der mit jedem Schwung kleiner wird, bis es zur Ruhe kommt.
Spiele ihn beim Auslösen einmal ab und sorge dafür, dass sich benachbarte Inhalte nicht verschieben.

Das Element schwingt von seiner Oberkante aus hin und her wie ein Pendel mit abklingendem Ausschlag.

Füge bei [wo] einen „Swing“-Aufmerksamkeitseffekt hinzu.
Das Element soll wie ein hängendes Schild hin und her schwingen, zuerst weit ausholend und dann schnell abklingend.
Lass es um seine Oberkante statt um die Mitte schwingen und spiele den Effekt beim Auslösen einmal ab.

Die Ecken des Elements runden sich beim Hovern weich ab.

Füge bei [wo] einen „Round Corners“-Hover-Effekt hinzu.
Die spitzen Ecken des Elements sollen sich weich abrunden, solange der Zeiger darüber ist, und beim Verlassen wieder spitz werden: sanft und schnell.
Lass die Größe des Elements unverändert und zeige denselben Effekt beim Tastaturfokus.

Beim Hovern gleitet ein diagonaler Lichtstreifen von einer Seite zur anderen über das Element.

Füge bei [wo] einen „Shine Sweep“-Hover-Effekt hinzu (auch sheen, shiny button, shine on hover, glint, shimmer oder shimmer button genannt).
Ein weicher diagonaler Lichtstreifen soll von links nach rechts über das Element gleiten und sich mit einer kurzen Pause wiederholen, solange der Zeiger darüber bleibt.
Schneide den Streifen am Rand des Elements ab, stoppe ihn, wenn der Zeiger es verlässt, und spiele ihn bei reduzierter Bewegung (prefers-reduced-motion) nicht ab.

Das Element verkleinert sich weich ein wenig, solange der Zeiger darüber ist.

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