Mit der Maus darüberfahren
Auch genannt Bounce In / Out
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.
Mit der Maus darüberfahren
Auch genannt Scale Up, Zoom In on hover
Das Element vergrößert sich weich ein wenig, solange der Zeiger darüber ist.
Einsatz
Buttons, Links, Vorschaubilder
Füge bei [wo] einen „Grow“-Hover-Effekt hinzu (auch scale up genannt).
Das Element soll sich weich ein wenig vergrößern, solange der Zeiger darüber ist, und beim Verlassen wieder schrumpfen: schnell und dezent.
Verhindere, dass sich das umgebende Layout verschiebt, und zeige denselben Effekt beim Tastaturfokus.
Das Element pulsiert im Doppelschlag-Rhythmus wie ein schlagendes Herz.
Einsatz
Like- und Favoriten-Icons, Live-Anzeigen
Füge bei [wo] einen „Heartbeat“-Effekt hinzu (auch heart beat genannt).
Das Element soll in einem schnellen Doppelschlag anschwellen und wieder entspannen und vor dem nächsten Schlag kurz ruhen, wie ein schlagendes Herz.
Lass ihn nahtlos in Schleife laufen, mit der Pause zwischen den Schlägen, und stoppe ihn bei reduzierter Bewegung (prefers-reduced-motion).
Auch genannt Badge pop, Badge pulse, Ping
Ein Zähler-Badge ploppt auf, hüpft oder pulsiert, wenn eine neue Benachrichtigung eintrifft.
Einsatz
Glockensymbol, Posteingang
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.