Spin

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.

Ein Ring oder Bogen dreht sich fortlaufend, um anzuzeigen, dass etwas lädt.

Füge bei [wo] einen „Circular Spinner“ hinzu (auch spinner oder throbber genannt).
Ein Bogen soll gleichmäßig um einen blassen Ring rotieren und sich dabei verlängern und verkürzen, weich und fließend.
Halte die Rotation nahtlos, gib ihm ein Lade-Label für Screenreader und verlangsame oder stoppe ihn bei reduzierter Bewegung (prefers-reduced-motion).

Das Element dreht sich beim Hovern um ein paar Grad.

Füge bei [wo] einen „Rotate“-Hover-Effekt hinzu.
Das Element soll sich leicht im Uhrzeigersinn drehen, solange der Zeiger darüber ist, und beim Verlassen zurückdrehen: weich und dezent.
Verhindere, dass sich das umgebende Layout verschiebt, und zeige denselben Effekt beim Tastaturfokus.

Der Text ist um einen Kreis gesetzt, der sich ununterbrochen dreht.

Füge bei [wo] „Spinning Text“ hinzu (auch circular text oder text on circle genannt).
Die Buchstaben sollen gleichmäßig um einen Kreis verteilt sein, der sich langsam und gleichmäßig dreht, ohne Sprung beim Neustart der Schleife.
Gib Screenreadern den Text einmal als normalen Text und stoppe die Drehung bei reduzierter Bewegung (prefers-reduced-motion).

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.

Das Element wird größer, wackelt mit leichter Drehung und kehrt mit feierlichem Schwung zur Ausgangsgröße zurück.

Füge bei [wo] einen „Tada“-Aufmerksamkeitseffekt hinzu.
Das Element soll kurz etwas kleiner werden, dann wachsen und mit schneller Neigung hin und her wackeln, bevor es zur normalen Größe zurückkehrt, wie eine kleine Feier.
Spiele ihn einmal ab, etwa direkt nach einem Erfolg, und lass ihn bei reduzierter Bewegung (prefers-reduced-motion) weg.

Das Element zittert schnell in winzigen Stößen in verschiedene Richtungen wie ein vibrierendes Handy.

Füge bei [wo] einen „Vibrate“-Aufmerksamkeitseffekt hinzu (auch buzz oder vibration genannt).
Das Element soll einen kurzen Moment in winzigen, schnellen Stößen in verschiedene Richtungen zittern wie ein vibrierendes Handy und dann zur Ruhe kommen.
Halte die Bewegung sehr klein, damit der Inhalt lesbar bleibt, und spiele sie einmal pro Hinweis ab statt in Schleife.