Ping

Konzentrische Kreise breiten sich von einem Mittelpunkt nach außen aus und verblassen.

Füge bei [wo] einen „Ripple Rings“-Effekt hinzu (auch background ripple oder concentric ripples genannt).
Ringe sollen sich fortlaufend von einem Mittelpunkt nach außen ausbreiten und beim Wachsen verblassen, gleichmäßig nacheinander: langsam und stetig.
Lass das mittlere Element ruhig an seinem Platz und stoppe die Wellen bei reduzierter Bewegung (prefers-reduced-motion).

Das Element skaliert oder blendet sanft und wiederholt ein und aus.

Füge bei [wo] einen „Pulse“-Effekt hinzu (auch pulsing genannt).
Das Element soll in einem langsamen, gleichmäßigen Rhythmus sanft anschwellen und wieder zurückgehen: dezent, ohne Nachfedern.
Lass ihn nahtlos in Schleife laufen, ohne das umliegende Layout zu verschieben, und stoppe ihn bei reduzierter Bewegung (prefers-reduced-motion).

Ein Zähler-Badge ploppt auf, hüpft oder pulsiert, wenn eine neue Benachrichtigung eintrifft.

Füge bei [wo] eine „Notification Badge Bounce“-Animation hinzu (auch badge pop oder ping genannt).
Trifft eine neue Benachrichtigung ein, soll das Zähler-Badge aus dem Nichts aufploppen und sich mit ein paar schnellen, federnden Hüpfern setzen, während einmal ein weicher Ring von ihm ausstrahlt.
Spiele sie einmal pro neuer Benachrichtigung ab statt in einer Schleife und gib die neue Anzahl an Screenreader aus.

Konzentrische Rahmenringe breiten sich beim Hovern vom Element nach außen aus oder ziehen sich nach innen zusammen.

Füge bei [wo] einen „Border Ripple“-Hover-Effekt hinzu.
Wenn der Zeiger hineinfährt, sollen sich ein paar Rahmenringe nacheinander vom Element nach außen ausbreiten und verblassen: schnell und leicht, wie eine Welle im Wasser.
Spiel ihn einmal pro Hover ab statt in einer Schleife und lass die Ringe das umgebende Layout nicht verschieben.

Das Element dehnt sich in elastischen Stufen in die Breite und staucht sich in der Höhe, bevor es zur normalen Form zurückkehrt.

Füge bei [wo] einen „Rubber Band“-Aufmerksamkeitseffekt hinzu (auch rubberband genannt).
Das Element soll sich in die Breite ziehen und in der Höhe stauchen, dann über ein paar kleinere elastische Schritte zurückfedern, bis es in normaler Größe ruht.
Spiele ihn beim Auslösen einmal ab und sorge dafür, dass sich das umliegende Layout beim Dehnen nicht verschiebt.

Das Element ruckelt schnell entlang einer Achse hin und her.

Füge bei [wo] einen „Shake“-Effekt hinzu (auch error shake oder invalid input shake genannt).
Das Element soll ein paarmal schnell nach links und rechts ruckeln und genau dort stoppen, wo es angefangen hat: schnell und bestimmt.
Spiele ihn bei jedem Fehler einmal ab statt in Schleife und kombiniere ihn mit einer sichtbaren Fehlermeldung, damit die Bedeutung nicht allein von der Bewegung abhängt.