Fade Up
Auch genannt Fade In Up, Reveal on Scroll
Das Element gleitet ein kurzes Stück nach oben und blendet dabei ein, als würde es an seinen Platz rücken.
Einsatz
Abschnittsüberschriften, Karten und Bilder, die beim Scrollen erscheinen
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 „Fade Up“-Einblendanimation hinzu (auch fade-in-up oder reveal on scroll genannt).
Die Elemente sollen beim ersten Hineinscrollen leicht nach oben gleiten und dabei einblenden: dezent und schnell, ohne Nachfedern.
Spiele sie nur einmal ab und zeige die Elemente bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation an.Ähnliche Animationen
A
Fade In Directional
Auch genannt Fade In Down, Fade In Left, Fade In Right
Das Element blendet ein und gleitet dabei ein kurzes Stück von einer Seite an seine endgültige Position.
Einsatz
Abschnitte und Karten, die beim Laden oder Scrollen erscheinen
Füge bei [wo] eine „Fade In Directional“-Einblendanimation hinzu (auch fade in left, fade in right oder fade in down genannt).
Das Element soll einblenden und dabei ein kurzes Stück von einer Seite an seine endgültige Position gleiten: schnell und fließend, beim Ankommen abbremsend, ohne Nachfedern.
Spiele sie nur einmal ab und zeige das Element bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation an seinem Platz an.A
Slide In
Auch genannt Slide In Up, Slide In Down, Slide In Left, Slide In Right
Das Element gleitet von jenseits des Containerrands an seine Ruheposition, ohne einzublenden.
Einsatz
Drawer, Seitenpanels, Banner
Füge bei [wo] eine „Slide In“-Einblendanimation hinzu (auch slide in left, slide in right, slide in up oder slide in down genannt).
Das Element soll von jenseits des Containerrands an seinen Platz gleiten und dabei die ganze Zeit voll deckend bleiben: schnell, sanft abbremsend, ohne Nachfedern.
Schneide es am Containerrand ab, damit es Nachbarelemente nicht überlappt und keine Scrollleisten erzeugt, solange es draußen ist, und zeige es bei reduzierter Bewegung (prefers-reduced-motion) direkt an seinem Platz an.Stagger
Auch genannt Staggered Animation, Cascade
Die Elemente einer Gruppe animieren nacheinander mit kleiner Verzögerung und bilden eine Welle, statt alle gleichzeitig zu erscheinen.
Einsatz
Listen, Raster, Navigationsmenüs und Suchergebnisse
Füge bei [wo] eine „Stagger“-Animation hinzu (auch staggered animation oder Kaskade genannt).
Die Elemente sollen nacheinander mit kurzer, gleichmäßiger Verzögerung nach oben einblenden, sodass die Gruppe wie eine schnelle Welle wirkt statt alles auf einmal.
Halte die ganze Sequenz auch bei langen Listen kurz, spiele sie nur einmal beim Hineinscrollen ab und zeige bei reduzierter Bewegung (prefers-reduced-motion) alles ohne Animation an.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
ABCD
Das Element flackert mit schnellen Deckkraftwechseln auf wie eine defekte Leuchtreklame, bevor es sichtbar bleibt.
Einsatz
Neon- und Retro-Texteffekte
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.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.