Swing
Das Element schwingt von seiner Oberkante aus hin und her wie ein Pendel mit abklingendem Ausschlag.
Einsatz
Hängeschilder, Benachrichtigungs-Icons
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 „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.Ähnliche Animationen
A
Das Element schaukelt mit Neigung hin und her wie ein wackeliger Gegenstand.
Einsatz
Aufmerksamkeit auf Icons oder Buttons lenken
Füge bei [wo] einen „Wobble“-Aufmerksamkeitseffekt hinzu.
Das Element soll mit Neigung hin und her schaukeln, zuerst mit großem Ausschlag, der mit jedem Schwung kleiner wird, bis es zur Ruhe kommt.
Spiele ihn beim Auslösen einmal ab und sorge dafür, dass sich benachbarte Inhalte nicht verschieben.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.A
Das Element schwingt an einem Scharnier oben links herab, baumelt und fällt dann aus dem Bildschirm.
Einsatz
Comichaftes Entfernen eines Elements
Füge bei [wo] eine „Hinge“-Ausblendanimation hinzu.
Das Element soll von seiner oberen linken Ecke herabschwingen, als hätte sich eine Schraube gelöst, hin und her baumeln und dann ausblendend aus dem Bildschirm fallen: langsam, komisch und bewusst.
Lass es über andere Inhalte fallen, ohne das Layout zu verschieben oder Scrollbalken zu erzeugen, entferne es nach dem Fallen und blende es bei reduzierter Bewegung (prefers-reduced-motion) sofort aus.A
Mit der Maus darüberfahren
Das Element dreht sich beim Hovern um ein paar Grad.
Einsatz
Icons, Vorschaubilder
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.Mehr aus Emphasis
A
Das Element wird größer, wackelt mit leichter Drehung und kehrt mit feierlichem Schwung zur Ausgangsgröße zurück.
Einsatz
Erfolgszustände, Feiermomente
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.Vibrate
Auch genannt Vibration, Buzz
Das Element zittert schnell in winzigen Stößen in verschiedene Richtungen wie ein vibrierendes Handy.
Einsatz
Warnhinweise, Signale wie bei einem eingehenden Anruf
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.