Bounce Scale

Das Element vergrößert sich schnell und federt mit einem kleinen Plopp zurück.

Füge bei [wo] einen „Pop“-Hover-Effekt hinzu.
Bei jedem Eintritt des Zeigers soll das Element einmal schnell anschwellen und wieder auf seine normale Größe zurückgehen, wie ein kleiner federnder Plopp.
Spiele ihn einmal pro Hover ab, statt die größere Größe zu halten oder zu loopen, und verhindere, dass sich das umgebende Layout verschiebt.

Das Element vergrößert sich weich ein wenig, solange der Zeiger darüber ist.

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 erscheint mit einem federnden Überschwingen und Einpendeln, entweder wachsend oder von einem Rand hereinfallend.

Füge bei [wo] eine „Bounce In“-Einblendanimation hinzu (auch bounce in down oder bounce in up genannt).
Das Element soll aus klein heraus wachsen, über seine volle Größe hinausschießen und ein paarmal nachwippen, bevor es zur Ruhe kommt: schnell und federnd.
Spiele sie nur einmal ab, damit sie nicht ständig Aufmerksamkeit zieht, und zeige das Element bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation an seinem Platz an.

Das Element schrumpft beim Drücken leicht und federt beim Loslassen zurück.

Füge bei [wo] einen „Press (Button Tap Scale)“-Effekt hinzu (auch tap feedback oder press state genannt).
Solange es gedrückt wird, soll das Element leicht schrumpfen und etwas dunkler werden und beim Loslassen mit einem kleinen Federn auf volle Größe zurückspringen: schnell und dezent.
Zeige dasselbe Feedback bei Tastatur und Touch und verhindere, dass sich das umgebende Layout verschiebt.

Ein hervorgehobener Hintergrund gleitet in einem Raster zwischen den Karten und folgt der jeweils gehoverten Karte.

Füge bei [wo] einen „Card Hover Effect“ hinzu (auch sliding highlight card grid genannt).
Ein weicher, hervorgehobener Hintergrund soll hinter der gehoverten Karte erscheinen, fließend zur nächsten Karte gleiten, auf die der Zeiger wechselt, und ausblenden, wenn der Zeiger das Raster verlässt.
Lass den Tastaturfokus die Hervorhebung genauso bewegen und halte die Karten selbst an ihrem Platz.

Ein weiches radiales Licht folgt dem Zeiger über die Kartenoberfläche und lässt den Hintergrund darunter durchscheinen.

Füge bei [wo] einen „Card Spotlight“-Effekt hinzu (auch spotlight hover, pointer glow, mouse-following glow oder radial gradient hover genannt).
Ein weicher, schwacher radialer Schein soll dem Zeiger über die Kartenoberfläche folgen, beim Hineinfahren einblenden und beim Verlassen ausblenden.
Halte den Schein hinter dem Karteninhalt, damit der Text lesbar bleibt, und lass die Karte auf Touch-Geräten einfach unbeleuchtet.

Eine Ecke des Elements klappt beim Hovern hoch wie eine Seite, die umgeblättert wird.

Füge bei [wo] einen „Curl“-Hover-Effekt hinzu (auch page curl genannt).
Eine Ecke des Elements soll sich weich hochklappen wie eine Seite beim Umblättern, dabei die Rückseite der Falte zeigen und beim Verlassen wieder flach werden.
Halte die Falte klein, damit sie keine wichtigen Inhalte verdeckt, und zeige denselben Effekt beim Tastaturfokus.