Flicker In
Das Element flackert mit schnellen Deckkraftwechseln auf wie eine defekte Leuchtreklame, bevor es sichtbar bleibt.
Einsatz
Neon- und Retro-Texteffekte
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] eine „Flicker In“-Einblendanimation hinzu.
Das Element soll in unregelmäßigen Abständen ein paarmal an- und ausgehen wie eine defekte Leuchtreklame, bevor es dauerhaft leuchtet: harte Blitze ohne Bewegung.
Spiele sie nur einmal ab, halte die Blitze wenige und langsam genug, damit sie für lichtempfindliche Menschen unbedenklich sind, und zeige das Element bei reduzierter Bewegung (prefers-reduced-motion) ruhig leuchtend an.Ähnliche Animationen
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.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.ABCDEF
Neon Glow Text
Auch genannt Neon Sign Flicker, Glowing Text
Der Text leuchtet wie eine Neonröhre und flackert oder pulsiert.
Einsatz
Nachtleben- und Gaming-Themen
Füge bei [wo] einen „Neon Glow Text“-Effekt hinzu (auch neon sign flicker oder glowing text genannt).
Der Text soll wie eine Neonröhre mit weichem, gleichmäßigem Licht leuchten und hin und wieder kurz ausflackern wie ein echtes Leuchtschild.
Lass das Flackern nur gelegentlich und nicht schnell auftreten, weil schnelles Blinken manchen Menschen schaden kann, und halte das Leuchten bei reduzierter Bewegung (prefers-reduced-motion) konstant.A
Fade In / Fade Out
Auch genannt Fade
Das Element geht an seinem Platz von völlig transparent zu völlig deckend über, beim Verlassen umgekehrt.
Einsatz
Modals, Toasts und erscheinende Seiteninhalte
Füge bei [wo] eine „Fade In / Fade Out“-Animation hinzu (auch fade genannt).
Das Element soll beim Erscheinen an seinem Platz von völlig transparent zu völlig sichtbar übergehen und beim Verschwinden genauso wieder ausblenden: sanft, ohne Bewegung oder Skalierung.
Sorge dafür, dass es nach dem Ausblenden weder anklickbar noch per Tastatur erreichbar ist, und wechsle bei reduzierter Bewegung (prefers-reduced-motion) sofort.Mehr aus Entrance & Exit
A
Das Element dreht sich einmal ganz um die Y-Achse und kommt dabei kurz leicht auf den Betrachter zu.
Einsatz
Aufmerksamkeitsstarkes Aufdecken einer Karte oder eines Badges
Füge bei [wo] eine „Flip“-Animation hinzu.
Das Element soll sich einmal ganz um seine senkrechte Achse drehen und dabei leicht auf den Betrachter zukommen, dann mit einem winzigen Einknicken der Größe zurückfinden: lebendig, aber kurz.
Gib ihm Perspektive, damit die Drehung als Tiefe wirkt, spiele sie einmal statt in Schleife ab und lass die Drehung bei reduzierter Bewegung (prefers-reduced-motion) weg.A
Flip In
Auch genannt Flip In X, Flip In Y
Das Element dreht sich in 3D um seine waagerechte oder senkrechte Achse von der Kante aus, bis es dem Betrachter zugewandt ist.
Einsatz
Aufdecken von Karten und Kacheln
Füge bei [wo] eine „Flip In“-Einblendanimation hinzu (auch flip in X oder flip in Y genannt).
Das Element soll von der Kante aus starten und sich um seine waagerechte Achse zum Betrachter drehen, dabei leicht über das Ziel hinaus- und zurückschwingen, bevor es zur Ruhe kommt: schnell, mit kleinem Nachwackeln.
Gib ihm Perspektive, damit die Drehung als Tiefe wirkt, und zeige es bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation nach vorn gerichtet an.A
Flip Out
Auch genannt Flip Out X, Flip Out Y
Das Element dreht sich in 3D, bis es auf der Kante steht und unsichtbar ist.
Einsatz
Entfernen von Karten und Kacheln
Füge bei [wo] eine „Flip Out“-Ausblendanimation hinzu (auch flip out X oder flip out Y genannt).
Das Element soll sich leicht nach hinten neigen und dann um seine senkrechte Achse drehen, bis es auf der Kante steht und verschwunden ist: schnell und knackig.
Gib ihm Perspektive, damit die Drehung als Tiefe wirkt, entferne das Element erst nach dem Ende der Drehung und blende es bei reduzierter Bewegung (prefers-reduced-motion) sofort aus.