Bounce
Auch genannt Bounce (attention)
Das Element hüpft auf und ab, wobei die Sprünge immer kleiner werden.
Einsatz
Scroll-Hinweise, Call-to-Action-Buttons
Prompt
Ersetze [wo] durch die Stelle auf deiner Seite und füge den Prompt in deinen KI-Agenten ein. Jeder Prompt enthält den Namen der Animation – beim nächsten Mal reicht es, sie beim Namen zu nennen.
Füge bei [wo] einen „Bounce“-Aufmerksamkeitseffekt hinzu.
Das Element soll in ein paar schnellen, jedes Mal kleineren Sprüngen hochhüpfen und wieder herunterfallen und sich beim Aufkommen leicht stauchen.
Spiele ihn beim Auslösen nur einmal ab statt in Schleife, und lass ihn bei reduzierter Bewegung weg.Ähnliche Animationen
A
Mit der Maus darüberfahren
Bob
Auch genannt Hang
Das Element schwebt nach oben und wippt dann beim Hovern fortlaufend auf und ab.
Einsatz
Icons, Buttons
Füge bei [wo] einen „Bob“-Hover-Effekt hinzu (auch hang genannt).
Das Element soll ein Stück nach oben schweben und dann sanft auf und ab wippen, solange der Zeiger darüber bleibt, und beim Verlassen wieder absinken: langsam und weich.
Lass das Wippen nur beim Hovern laufen und halte das Element bei reduzierter Bewegung (prefers-reduced-motion) still.A
Bounce In
Auch genannt Bounce In Down, Bounce In Up
Das Element erscheint mit einem federnden Überschwingen und Einpendeln, entweder wachsend oder von einem Rand hereinfallend.
Einsatz
Benachrichtigungs-Badges und verspielte Modals
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.3
Notification Badge Bounce
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.Mehr aus Emphasis
Flash
Auch genannt Blink
Das Element blinkt, indem es seine Deckkraft schnell wechselt.
Einsatz
Hinweis auf neue Inhalte
Füge bei [wo] einen „Flash“-Aufmerksamkeitseffekt hinzu (auch blink genannt).
Das Element soll zweimal schnell aus- und wieder einblenden und danach voll sichtbar bleiben.
Spiele ihn nur einmal ab statt als endloses Blinken, und lass ihn bei reduzierter Bewegung weg, weil schnelles Blinken unangenehm sein kann.ABC
Flicker
Auch genannt Flickering
Die Deckkraft des Elements flackert unregelmäßig wie eine defekte Lampe.
Einsatz
Neon- und Glitch-Effekte
Füge bei [wo] einen „Flicker“-Effekt hinzu (auch flickering genannt).
Das Element soll die meiste Zeit ruhig bleiben und in kurzen, unregelmäßigen Aussetzern dunkler werden wie eine defekte Neonröhre.
Halte das Timing unregelmäßig statt gleichmäßig, vermeide schnelles Blitzen in voller Stärke und stoppe ihn bei reduzierter Bewegung.A
Head Shake
Auch genannt Headshake, No Shake
Das Element pendelt mit leichter Drehung hin und her wie ein verneinendes Kopfschütteln.
Einsatz
Ungültige Eingaben oder Ablehnungen
Füge bei [wo] einen „Head Shake“-Aufmerksamkeitseffekt hinzu (auch headshake oder no shake genannt).
Das Element soll sich schnell mit einer leichten Drehung hin und her wenden wie ein verneinendes Kopfschütteln, jede Bewegung kleiner als die vorige, bis es zur Ruhe kommt.
Spiele ihn bei jedem Auslösen einmal ab, etwa bei einer abgelehnten Aktion, und sorge dafür, dass sich das umliegende Layout nicht bewegt.