Web-Animationen live sehen. Prompts direkt einfügen.

Das Element startet verkleinert und versetzt, gleitet dann herein und wächst auf volle Größe.

Füge bei [wo] eine „Back In“-Einblendanimation hinzu (auch back in up oder back in down genannt).
Das Element soll verkleinert und leicht transparent von jenseits eines Rands hereinkommen und erst an seinem Platz auf volle Größe wachsen: eine bewusste Bewegung in zwei Schritten, kein schnelles Aufploppen.
Spiele sie nur einmal ab und zeige das Element bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation an seinem Platz an.

Das Element schrumpft und gleitet zu einem Rand hinaus, während es ausblendet.

Füge bei [wo] eine „Back Out“-Ausblendanimation hinzu.
Das Element soll zuerst an seinem Platz leicht schrumpfen und dann zu einem Rand hinausgleiten, während es ausblendet: ein bewusster Abgang in zwei Schritten, kein einzelnes schnelles Ausblenden.
Entferne das Element erst nach dem Ende der Animation, damit das Layout nicht mitten in der Bewegung springt, und entferne es bei reduzierter Bewegung (prefers-reduced-motion) sofort.

Das Element startet stark verschwommen und wird scharf, oft während es hereingleitet oder einblendet.

Füge bei [wo] eine „Blur In“-Einblendanimation hinzu (auch text focus in, focus in oder blur text reveal genannt).
Der Inhalt soll stark verschwommen und transparent beginnen und dann an seinem Platz scharf werden: weich und eher langsam, ohne Bewegung.
Spiele sie nur einmal ab und zeige den Text bei reduzierter Bewegung (prefers-reduced-motion) sofort scharf an.

Das Element verschwimmt zunehmend, während es ausblendet oder hinausgleitet.

Füge bei [wo] eine „Blur Out“-Ausblendanimation hinzu (auch text blur out oder smoky text dissipate genannt).
Der Inhalt soll an seinem Platz immer stärker verschwimmen und dabei ausblenden: weich und eher langsam, als würde er sich auflösen.
Blende das Element erst nach dem Ende der Unschärfe aus oder entferne es, und blende es bei reduzierter Bewegung (prefers-reduced-motion) sofort aus.

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 federt leicht nach und schrumpft dann oder fliegt zu einem Rand hinaus.

Füge bei [wo] eine „Bounce Out“-Ausblendanimation hinzu.
Das Element soll kurz leicht einsinken, etwas über seine Größe hinaus anschwellen und dann schrumpfend ausblenden: kurz und federnd.
Nimm es erst nach dem Ende der Animation aus dem Layout und blende es bei reduzierter Bewegung (prefers-reduced-motion) sofort aus.

Ein clip-path oder eine Maske wächst von einem Rand oder Punkt aus und legt Bild oder Text nach und nach frei.

Füge bei [wo] einen „Clip Reveal“-Einblendeffekt hinzu (auch mask reveal, wipe reveal oder image reveal genannt).
Eine Schnittkante soll von links nach rechts darüberstreichen und den Inhalt nach und nach freilegen, während er selbst stillsteht: gleichmäßig, mit weichem Anfang und Ende.
Reserviere den Platz des Elements von Anfang an, damit sich nichts verschiebt, und zeige es bei reduzierter Bewegung (prefers-reduced-motion) vollständig freigelegt an.

Das Element geht an seinem Platz von völlig transparent zu völlig deckend über, beim Verlassen umgekehrt.

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.

Das Element blendet ein und gleitet dabei ein kurzes Stück von einer Seite an seine endgültige Position.

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.

Das Element blendet aus und gleitet dabei in eine Richtung davon.

Füge bei [wo] eine „Fade Out Directional“-Ausblendanimation hinzu (auch fade out up oder fade out down genannt).
Das Element soll ausblenden und dabei ein kurzes Stück in eine Richtung gleiten: schnell, beim Hinausgehen beschleunigend.
Nimm es erst nach dem Ausblenden aus dem Layout, damit benachbarte Inhalte nicht zu früh springen, und blende es bei reduzierter Bewegung (prefers-reduced-motion) sofort aus.

Das Element gleitet ein kurzes Stück nach oben und blendet dabei ein, als würde es an seinen Platz rücken.

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.

Das Element flackert mit schnellen Deckkraftwechseln auf wie eine defekte Leuchtreklame, bevor es sichtbar bleibt.

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.

Das Element dreht sich einmal ganz um die Y-Achse und kommt dabei kurz leicht auf den Betrachter zu.

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.

Das Element dreht sich in 3D um seine waagerechte oder senkrechte Achse von der Kante aus, bis es dem Betrachter zugewandt ist.

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.

Das Element dreht sich in 3D, bis es auf der Kante steht und unsichtbar ist.

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.

Das Element schwingt an einem Scharnier oben links herab, baumelt und fällt dann aus dem Bildschirm.

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.

Das Element springt aus einem kleinen, gedrehten Zustand hervor, schießt über und pendelt sich ein wie ein Springteufel.

Füge bei [wo] eine „Jack In The Box“-Einblendanimation hinzu.
Das Element soll aus einem winzigen, schräg gestellten Zustand an seiner Unterkante verankert hochschnellen, über die Senkrechte hinaus hin und her schaukeln und sich dann einpendeln: federnd und verspielt.
Spiele sie nur einmal ab und zeige das Element bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation an seinem Platz an.

Das Element schießt schräg geneigt von der Seite herein und richtet sich beim Ankommen gerade auf.

Füge bei [wo] eine „Light Speed In“-Einblendanimation hinzu (auch lightspeed in genannt).
Das Element soll schnell von der Seite hereinschießen, schräg geneigt wie in voller Fahrt, die Neigung einmal überkorrigieren und sich beim Ankommen gerade aufrichten: schnell und dramatisch, zum Ende hin abbremsend.
Verhindere eine horizontale Scrollleiste, solange es noch außerhalb des Bildschirms ist, und zeige es bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation an seinem Platz an.

Das Element neigt sich und rast zur Seite davon, während es ausblendet.

Füge bei [wo] eine „Light Speed Out“-Ausblendanimation hinzu (auch lightspeed out genannt).
Das Element soll sich neigen und beim Ausblenden zur Seite davonrasen: schnell, beim Verlassen beschleunigend.
Verhindere eine horizontale Scrollleiste, wenn es über den Rand hinausläuft, und blende es bei reduzierter Bewegung (prefers-reduced-motion) sofort aus.

Das Element schrumpft aus einem großen, unscharfen, transparenten Zustand in die Schärfe wie eine Rauchwolke, beim Verlassen umgekehrt.

Füge bei [wo] eine „Puff In / Puff Out“-Animation hinzu (auch puff genannt).
Beim Erscheinen soll das Element aus einem großen, unscharfen, transparenten Zustand in die Schärfe schrumpfen wie eine Rauchwolke, die sich legt; beim Verschwinden soll es wieder zu einer Unschärfe anschwellen und verschwinden: weich und recht schnell.
Achte darauf, dass der vergrößerte Zustand das Layout nicht verschiebt oder Scrollleisten erzeugt, und wechsle bei reduzierter Bewegung (prefers-reduced-motion) sofort.

Das Element rollt wie ein Rad von links herein und blendet dabei ein.

Füge bei [wo] eine „Roll In“-Einblendanimation hinzu.
Das Element soll wie ein Rad von links hereinrollen, sich unterwegs drehen und dabei einblenden: weich, beim Ankommen abbremsend.
Spiele sie nur einmal ab und zeige das Element bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation an seinem Platz an.

Das Element rollt nach rechts davon und blendet dabei aus.

Füge bei [wo] eine „Roll Out“-Ausblendanimation hinzu.
Das Element soll wie ein Rad nach rechts davonrollen, sich unterwegs drehen und dabei ausblenden: weich, beim Verlassen beschleunigend.
Nimm es erst aus dem Layout, wenn es weggerollt ist, und blende es bei reduzierter Bewegung (prefers-reduced-motion) sofort aus.

Das Element dreht sich um eine Ecke oder seine Mitte herein und blendet dabei ein.

Füge bei [wo] eine „Rotate In“-Einblendanimation hinzu (auch rotate in down left genannt).
Das Element soll aus einem schrägen Winkel um seine linke untere Ecke an seinen Platz schwenken und dabei einblenden: weich und gemächlich, beim Ankommen sanft auslaufend.
Spiele sie nur einmal ab und zeige das Element bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation an seinem Platz an.

Das Element dreht sich um einen Drehpunkt und blendet dabei aus.

Füge bei [wo] eine „Rotate Out“-Ausblendanimation hinzu.
Das Element soll sich um seine Mitte drehen, etwas mehr als eine halbe Umdrehung, und dabei ausblenden: weich, zum Ende hin beschleunigend.
Entferne es erst, wenn die Drehung vorbei ist, und blende es bei reduzierter Bewegung (prefers-reduced-motion) sofort aus.

Das Element gleitet von jenseits des Containerrands an seine Ruheposition, ohne einzublenden.

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.

Das Element gleitet über einen Containerrand hinaus und verschwindet.

Füge bei [wo] eine „Slide Out“-Ausblendanimation hinzu (auch slide out up oder slide out down genannt).
Das Element soll über seinen Containerrand hinausgleiten und verschwinden und dabei voll deckend bleiben: schnell, beim Verlassen beschleunigend.
Schneide es am Containerrand ab, entziehe es Tastatur und Screenreadern, sobald es nicht mehr sichtbar ist, und blende es bei reduzierter Bewegung (prefers-reduced-motion) sofort aus.

Die Elemente einer Gruppe animieren nacheinander mit kleiner Verzögerung und bilden eine Welle, statt alle gleichzeitig zu erscheinen.

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.

Das Element dreht sich und wächst aus einem Punkt heraus, während es einblendet.

Füge bei [wo] eine „Swirl In“-Einblendanimation hinzu (auch swirl in forward genannt).
Das Element soll sich deutlich mehr als eine ganze Umdrehung drehen, dabei aus einem einzigen Punkt auf volle Größe wachsen und einblenden: anfangs schnell, beim Ankommen langsamer werdend.
Spiele sie nur einmal und nur für ein einzelnes Element statt für eine ganze Gruppe ab, und zeige es bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation an seinem Platz an.

Die Buchstaben beginnen weit gesperrt und blass und rücken beim Erscheinen auf normalen Abstand zusammen.

Füge bei [wo] eine „Tracking In“-Textanimation hinzu (auch text tracking in oder letter-spacing in genannt).
Die Buchstaben sollen weit gesperrt und blass beginnen und dann auf normalen Abstand zusammenrücken, während sie voll sichtbar werden: weich, zum Ende hin abbremsend.
Halte den Text während der Abstandsänderung zentriert und einzeilig, damit sich das umgebende Layout nicht verschiebt, und zeige ihn bei reduzierter Bewegung (prefers-reduced-motion) mit normalem Abstand an.

Das Element wächst aus einem kleinen, transparenten Zustand auf volle Größe und blendet dabei ein.

Füge bei [wo] eine „Zoom In“-Einblendanimation hinzu (auch scale in genannt).
Das Element soll von klein und transparent auf volle Größe wachsen und dabei einblenden: schnell und weich, ohne Überschwingen.
Skaliere es von der Mitte aus, ohne das umgebende Layout zu beeinflussen, und zeige es bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation an seinem Platz an.

Das Element schrumpft und blendet aus, bis es verschwindet.

Füge bei [wo] eine „Zoom Out“-Ausblendanimation hinzu (auch scale out genannt).
Das Element soll zur Mitte hin schrumpfen und dabei ausblenden, bis es verschwindet: schnell, zum Ende hin beschleunigend.
Nimm es erst aus dem Layout und dem Tastaturfokus, wenn es verschwunden ist, und blende es bei reduzierter Bewegung (prefers-reduced-motion) sofort aus.

Das Element hüpft auf und ab, wobei die Sprünge immer kleiner werden.

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.

Das Element blinkt, indem es seine Deckkraft schnell wechselt.

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.

Die Deckkraft des Elements flackert unregelmäßig wie eine defekte Lampe.

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.

Das Element pendelt mit leichter Drehung hin und her wie ein verneinendes Kopfschütteln.

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.

Das Element pulsiert im Doppelschlag-Rhythmus wie ein schlagendes Herz.

Füge bei [wo] einen „Heartbeat“-Effekt hinzu (auch heart beat genannt).
Das Element soll in einem schnellen Doppelschlag anschwellen und wieder entspannen und vor dem nächsten Schlag kurz ruhen, wie ein schlagendes Herz.
Lass ihn nahtlos in Schleife laufen, mit der Pause zwischen den Schlägen, und stoppe ihn bei reduzierter Bewegung (prefers-reduced-motion).

Das Element verzerrt sich mit abklingender Stärke hin und her wie wackelnder Wackelpudding.

Füge bei [wo] einen „Jello“-Aufmerksamkeitseffekt hinzu (auch jelly genannt).
Das Element soll sich wie wackelnder Wackelpudding hin und her verzerren: anfangs kräftig, dann schnell zur Ruhe kommend.
Spiele ihn beim Auslösen einmal ab und behalte den Platzbedarf des Elements bei, damit sich benachbarte Inhalte nicht verschieben.

Eine Kopie des Elements wächst wiederholt und blendet dabei aus, wie ein Radarsignal.

Füge bei [wo] einen „Ping“-Effekt hinzu (auch radar ping oder pulse ring genannt).
Eine Kopie des Elements soll nach außen wachsen und ausblenden, immer wieder in gleichmäßigem Takt, während das Element selbst stillsteht.
Zeichne den Ring auf einer eigenen Ebene, damit er nie das Layout verändert, und stoppe die Schleife bei reduzierter Bewegung (prefers-reduced-motion).

Das Element skaliert oder blendet sanft und wiederholt ein und aus.

Füge bei [wo] einen „Pulse“-Effekt hinzu (auch pulsing genannt).
Das Element soll in einem langsamen, gleichmäßigen Rhythmus sanft anschwellen und wieder zurückgehen: dezent, ohne Nachfedern.
Lass ihn nahtlos in Schleife laufen, ohne das umliegende Layout zu verschieben, und stoppe ihn bei reduzierter Bewegung (prefers-reduced-motion).

Das Element dehnt sich in elastischen Stufen in die Breite und staucht sich in der Höhe, bevor es zur normalen Form zurückkehrt.

Füge bei [wo] einen „Rubber Band“-Aufmerksamkeitseffekt hinzu (auch rubberband genannt).
Das Element soll sich in die Breite ziehen und in der Höhe stauchen, dann über ein paar kleinere elastische Schritte zurückfedern, bis es in normaler Größe ruht.
Spiele ihn beim Auslösen einmal ab und sorge dafür, dass sich das umliegende Layout beim Dehnen nicht verschiebt.

Das Element ruckelt schnell entlang einer Achse hin und her.

Füge bei [wo] einen „Shake“-Effekt hinzu (auch error shake oder invalid input shake genannt).
Das Element soll ein paarmal schnell nach links und rechts ruckeln und genau dort stoppen, wo es angefangen hat: schnell und bestimmt.
Spiele ihn bei jedem Fehler einmal ab statt in Schleife und kombiniere ihn mit einer sichtbaren Fehlermeldung, damit die Bedeutung nicht allein von der Bewegung abhängt.

Das Element dreht sich fortlaufend mit gleichbleibender Geschwindigkeit.

Füge bei [wo] einen „Spin“-Effekt hinzu (auch spinner oder rotate loop genannt).
Das Element soll sich fortlaufend mit konstanter, gleichmäßiger Geschwindigkeit drehen, ohne Easing zwischen den Umdrehungen.
Mach die Schleife nahtlos, gib dem Spinner ein barrierefreies Lade-Label und verlangsame oder stoppe ihn bei reduzierter Bewegung (prefers-reduced-motion).

Das Element schwingt von seiner Oberkante aus hin und her wie ein Pendel mit abklingendem Ausschlag.

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.

Das Element wird größer, wackelt mit leichter Drehung und kehrt mit feierlichem Schwung zur Ausgangsgröße zurück.

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.

Das Element zittert schnell in winzigen Stößen in verschiedene Richtungen wie ein vibrierendes Handy.

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.

Das Element schaukelt mit Neigung hin und her wie ein wackeliger Gegenstand.

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.

Ein Header verschwindet beim Herunterscrollen und erscheint beim Hochscrollen wieder.

Füge bei [wo] einen „Hide on Scroll Header“ hinzu (auch headroom oder auto-hide navbar genannt).
Der Header soll nach oben aus dem Bild gleiten, wenn man nach unten scrollt, und bei jedem Hochscrollen wieder hereingleiten: schnell und weich, abhängig von der Richtung, nicht von der Distanz.
Zeig ihn ganz oben auf der Seite immer an, ignoriere winziges Scroll-Zittern und lass ihn sichtbar, solange etwas darin den Tastaturfokus hat.

Vertikales Scrollen bewegt eine fixierte Reihe von Panels seitwärts.

Füge bei [wo] eine „Horizontal Scroll Section“ hinzu (auch horizontal scrolling oder scroll-jacked horizontal gallery genannt).
Erreicht der Abschnitt den oberen Rand, soll er fixiert bleiben, während Herunterscrollen seine Reihe von Panels seitwärts bewegt, und sich lösen, sobald das letzte Panel sichtbar ist.
Koppel die seitliche Bewegung direkt an die Scrollposition, damit Zurückscrollen sie umkehrt, und nutze auf kleinen Bildschirmen oder bei reduzierter Bewegung (prefers-reduced-motion) eine normale wischbare Reihe.

Ebenen bewegen sich beim Scrollen unterschiedlich schnell und erzeugen so Tiefenwirkung.

Füge bei [wo] einen „Parallax“-Scrolleffekt hinzu (auch parallax scrolling oder parallax layers genannt).
Hintergrundebenen sollen sich beim Scrollen langsamer bewegen als der Inhalt, die hinterste Ebene am wenigsten, für eine dezente Tiefenwirkung.
Koppel ihn ohne Verzögerung an die Scrollposition, lass Text auf der Ebene mit normaler Geschwindigkeit und schalte den Effekt bei reduzierter Bewegung (prefers-reduced-motion) ab.

Ein Element bleibt über einen Scrollbereich an Ort und Stelle fixiert, während andere Inhalte oder Animationen weiterlaufen.

Füge bei [wo] einen „Pinning“-Scrolleffekt hinzu (auch pinned section oder sticky section genannt).
Ein Panel soll an Ort und Stelle fixiert bleiben, während der Inhalt daneben vorbeiscrollt, sich passend zum gerade gelesenen Schritt ändern und sich am Ende des Abschnitts lösen.
Nutze lieber natives Sticky-Positioning, statt das Scrollen zu kapern, und sorge dafür, dass jeder Schritt auf kleinen Bildschirmen auch ohne das fixierte Panel gut lesbar ist.

Ein Balken oder Ring füllt sich, während man durch die Seite oder den Artikel scrollt.

Füge bei [wo] einen „Scroll Progress Indicator“ hinzu (auch reading progress bar genannt).
Ein dünner Balken am oberen Rand soll sich von links nach rechts füllen, passend dazu, wie weit gescrollt wurde, und am Ende die volle Breite erreichen.
Kopple ihn direkt an die Scrollposition, ohne nachziehende Glättung, und lass ihn keinen Inhalt verdecken.

Das Scrollen rastet an festgelegten Punkten wie Slides oder Abschnitten ein.

Füge bei [wo] „Scroll Snap“ hinzu (auch scroll snapping oder snap scrolling genannt).
Wenn das Scrollen endet, soll die Ansicht sauber am nächsten Abschnitt einrasten, sodass jeder bündig am Rand steht statt auf halbem Weg stehen zu bleiben.
Nutze das native Einrasten des Browsers, damit Mausrad, Touch und Tastatur weiter funktionieren, und sorg dafür, dass Inhalte, die höher als die Ansicht sind, vollständig lesbar bleiben.

Der Fortschritt der Animation hängt direkt an der Scrollposition, sodass Vor- und Zurückscrollen sie abspielt oder zurückspult.

Füge bei [wo] eine „Scroll-Linked Animation“ hinzu (auch scroll-driven animation oder scroll scrub genannt).
Die Animation soll exakt der Scrollposition folgen: Runterscrollen spielt sie vorwärts ab, Hochscrollen spult sie sofort zurück, ohne eigenes zeitbasiertes Easing.
Lege die ganze Animation auf einen klaren Scrollbereich und zeige bei reduzierter Bewegung (prefers-reduced-motion) einen sinnvollen statischen Zustand.

Eine Animation spielt einmal ab, wenn ein Element in den Viewport eintritt oder ihn verlässt.

Füge bei [wo] eine „Scroll-Triggered Animation“ hinzu (auch reveal on scroll oder animate on scroll genannt).
Jedes Element soll beim Hineinscrollen einmal einblenden und nach oben an seinen Platz gleiten, in eigenem schnellem, weichem Tempo statt der Scrollposition zu folgen.
Lass den Inhalt sichtbar, falls Skripte nicht laden, und zeige die Elemente bei reduzierter Bewegung (prefers-reduced-motion) sofort an.

Scrollen und Sprünge zu Ankern gleiten weich aus, statt abrupt zu springen.

Füge bei [wo] „Smooth Scroll“ hinzu (auch smooth scrolling oder inertia scroll genannt).
Scrollen und Sprünge zu Ankern sollen weich gleiten und sanft auslaufen statt ruckartig zu springen – leicht und direkt, nicht schwer und träge.
Erhalte natives Verhalten wie Tastatur-Scrollen, Scrollbar und Suche auf der Seite, und schalte die Glättung bei reduzierter Bewegung (prefers-reduced-motion) ab.

Karten bleiben beim Scrollen oben kleben und stapeln sich übereinander, wobei die früheren oft kleiner werden.

Füge bei [wo] „Stacking Cards“ hinzu (auch sticky stacking cards oder card stack scroll genannt).
Beim Scrollen soll jede Karte nahe am oberen Rand kleben bleiben und die nächste darüber hochgleiten, während die Karten darunter leicht schrumpfen, sodass ein ordentlicher Stapel entsteht.
Lass von jeder früheren Karte einen schmalen Rand sichtbar und gib der letzten Karte genug Platz, um ihre Position zu erreichen, bevor der Abschnitt endet.

Ein fixierter Header wird nach dem Herunterscrollen niedriger oder kleiner.

Füge bei [wo] einen „Sticky Header Shrink“ hinzu (auch shrinking header oder shrink on scroll genannt).
Der Header soll oben bleiben und, sobald ein Stück heruntergescrollt wird, weich zu einer schmaleren Leiste mit kleinerem Logo schrumpfen und oben wieder wachsen.
Sorg dafür, dass der Inhalt darunter nicht springt, während der Header seine Größe ändert.

Große Textzeilen gleiten seitwärts, während die Seite vertikal gescrollt wird.

Füge bei [wo] eine „Text Marquee on Scroll“ hinzu (auch scroll text marquee oder scroll velocity text genannt).
Große Textzeilen sollen beim Runterscrollen seitwärts gleiten, abwechselnde Zeilen in entgegengesetzte Richtungen, und beim Hochscrollen zurückgleiten.
Kopple die Bewegung an die Scrollposition, verhindere, dass die langen Zeilen eine horizontale Scrollbar erzeugen, und lass sie bei reduzierter Bewegung (prefers-reduced-motion) stillstehen.

Ein Element oder eine Szene wird beim Scrollen größer oder kleiner.

Füge bei [wo] einen „Zoom on Scroll“-Effekt hinzu (auch scroll zoom oder scale on scroll genannt).
Solange der Abschnitt im Blick gehalten wird, soll das Element synchron zum Scrollen von einer kleinen Karte weich wachsen, bis es die ganze Ansicht füllt, und beim Hochscrollen wieder schrumpfen.
Skaliere es, ohne das Layout drumherum zu verschieben, und zeige es bei reduzierter Bewegung (prefers-reduced-motion) direkt in Endgröße ohne Zoom.

Text mit einer Verlaufsfüllung, deren Farben sich ständig verschieben oder fließen.

Füge bei [wo] einen „Animated Gradient Text“-Effekt hinzu (auch aurora text oder rainbow text sweep genannt).
Die Buchstaben sollen mit einem Farbverlauf gefüllt sein, dessen Farben langsam und weich über den Text fließen, in einer endlosen, nahtlosen Schleife.
Halte den Text jederzeit gut lesbar vor seinem Hintergrund und lass die Farben bei reduzierter Bewegung (prefers-reduced-motion) stillstehen.

Text zuckt mit verschobenen Streifen und rot-cyanen Farbversätzen wie ein gestörtes Signal.

Füge bei [wo] einen „Glitch Text“-Hover-Effekt hinzu (auch text glitch oder RGB split glitch genannt).
Solange der Zeiger über dem Text ist, soll er in schnellen, knackigen Schüben zucken: Dünne horizontale Streifen springen seitwärts und zwei farbige Kopien driften auseinander wie ein gestörtes Signal; verlässt der Zeiger den Text, beruhigt er sich wieder.
Halte den echten Text nur einmal im Dokument, damit Screenreader die Kopien nicht vorlesen, und zeige denselben Effekt beim Tastaturfokus.

Text zeigt schillernde Regenbogen-Folienreflexe, die sich mit dem Zeiger oder mit der Zeit bewegen.

Füge bei [wo] einen „Holographic Text“-Hover-Effekt hinzu (auch holographic foil text genannt).
Solange der Zeiger über dem Text ist, soll ein Band aus folienartigen Farben langsam und weich über die Buchstaben hin und her gleiten; verlässt der Zeiger den Text, kehrt er zu seinem schlichten Aussehen zurück.
Halte die Buchstaben in jeder Phase des Schimmers lesbar und zeige denselben Effekt beim Tastaturfokus.

Text skaliert, bewegt oder dreht sich als bewegtes Grafikelement statt als statischer Fließtext.

Füge bei [wo] „Kinetic Typography“ hinzu (auch kinetic text genannt).
Zeilen aus großem, wiederholtem Text sollen langsam und gleichmäßig abwechselnd in entgegengesetzte Richtungen seitwärts gleiten und die Wörter so zu einer bewegten Grafik machen.
Lass jede Zeile nahtlos ohne sichtbaren Sprung laufen, sorg dafür, dass Screenreader den Text nur einmal vorlesen, und stoppe die Bewegung bei reduzierter Bewegung (prefers-reduced-motion).

Buchstaben fliegen beim Hovern auseinander und kehren zurück oder platzen beim Erscheinen nach außen.

Füge bei [wo] einen „Letter Scatter“-Hover-Effekt hinzu (auch scatter gather letters oder explosive letter burst genannt).
Fährt der Zeiger über den Text, soll jeder Buchstabe ein kurzes Stück in seine eigene Richtung fliegen und sich dabei leicht drehen; verlässt der Zeiger den Text, sammeln sie sich weich wieder zum Wort.
Halte den Platz des Worts im Layout fest, während die Buchstaben sich bewegen, lass Screenreader es als ein Wort lesen und zeige denselben Effekt beim Tastaturfokus.

Ein gestreifter oder versetzter Schatten hinter den Buchstaben bewegt sich in eine Richtung.

Füge bei [wo] einen „Line Shadow Text“-Effekt hinzu (auch text shadow animation oder dancing shadow genannt).
Hinter den Buchstaben soll ein versetzter Schatten aus dünnen diagonalen Streifen langsam und stetig gleiten, während die Buchstaben selbst ruhig und scharf bleiben.
Lass die Streifenbewegung nahtlos loopen und den Schatten bei reduzierter Bewegung (prefers-reduced-motion) stillstehen.

Buchstaben füllen sich mit einer steigenden, wogenden Flüssigkeit.

Füge bei [wo] einen „Liquid Fill Text“-Effekt hinzu (auch water fill text genannt).
Die konturierten Buchstaben sollen sich mit Flüssigkeit füllen, deren wellige Oberfläche seitwärts rollt, während der Pegel langsam steigt und sinkt – als weiche, durchgehende Schleife.
Halte das Wort als echten Text für Screenreader verfügbar und lass die Flüssigkeit bei reduzierter Bewegung (prefers-reduced-motion) auf einem ruhigen Pegel stehen.

Der Text gleitet hinter einer Schnittkante nach oben, als tauche er aus dem Nichts auf.

Füge bei [wo] einen „Mask Reveal“-Texteinstieg hinzu (auch line mask reveal oder text masking genannt).
Jede Zeile soll hinter einer unsichtbaren Kante nach oben gleiten, als tauche sie aus dem Nichts auf, eine nach der anderen, schnell und weich, ohne Nachfedern.
Spiele ihn einmal ab, wenn der Text ins Bild scrollt, und zeige den Text bei reduzierter Bewegung (prefers-reduced-motion) sofort ohne Animation.

Grüne Zeichen fallen in Spalten herab wie der Code-Regen aus Matrix.

Füge bei [wo] einen „Matrix Text“-Effekt hinzu (auch digital rain text genannt).
Zeichenspalten sollen gleichmäßig mit leicht unterschiedlichen Geschwindigkeiten herabfallen, jede mit einem hellen vorderen Zeichen und einem Schweif, der dahinter verblasst.
Behandle ihn als Dekoration, die vor Screenreadern verborgen ist, halte ihn leichtgewichtig und stoppe ihn bei reduzierter Bewegung (prefers-reduced-motion).

Die Buchstaben tropfen und ziehen sich nach unten, als würden sie schmelzen.

Füge bei [wo] einen „Melting Text“-Effekt hinzu.
Die Buchstaben sollen langsam nach unten sacken, während sich darunter Tropfen in die Länge ziehen, als würden sie schmelzen, und dann in einem ruhigen, geschmolzenen Zustand stehen bleiben.
Spiele ihn einmal ab, wenn der Text ins Bild kommt, halte das Wort am Ende lesbar und verzichte bei reduzierter Bewegung (prefers-reduced-motion) auf die Animation.

Ein Wort verschwimmt an derselben Stelle und geht fließend ins nächste über.

Füge bei [wo] einen „Morphing Text“-Effekt hinzu (auch text morph genannt).
Ein Wort soll an derselben Stelle verschwimmen und mit einem weichen, zähflüssigen Übergang ins nächste verschmelzen und dann kurz stillstehen, bevor der nächste Wechsel kommt.
Wechsle die Wörter nahtlos durch, lass Screenreader die Wörter als normalen Text lesen und stoppe den Wechsel bei reduzierter Bewegung (prefers-reduced-motion).

Der Text leuchtet wie eine Neonröhre und flackert oder pulsiert.

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.

Die Buchstaben eines Titels wechseln oder bewegen sich nacheinander, während man durch die Abschnitte scrollt.

Füge bei [wo] „Scrolling Letters“ hinzu (auch on-scroll letter animations genannt).
Während man durch die Abschnitte scrollt, sollen die Buchstaben des Titels nacheinander von links nach rechts zum nächsten Zeichen weiterrollen, direkt an die Scrollposition gekoppelt.
Beim Zurückscrollen sollen sie zurückrollen, und Screenreader sollen den aktuellen Titel als normalen Text erhalten.

Ein heller Glanz streicht immer wieder über die Buchstaben.

Füge bei [wo] einen „Shimmer Text“-Effekt hinzu (auch animated shiny text oder metallic shimmer text genannt).
Ein Lichtstreifen soll weich von links nach rechts über die Buchstaben gleiten und sich nach einer kurzen Pause wiederholen.
Halte den Text unter dem Glanz lesbar und lass ihn bei reduzierter Bewegung (prefers-reduced-motion) still stehen.

Eine Überschrift wird in waagerechte Streifen geschnitten, die sich beim Scrollen seitlich gegeneinander verschieben.

Füge bei [wo] einen „Sliced Text“-Effekt hinzu (auch on-scroll sliced text genannt).
Eine große Überschrift soll in waagerechte Streifen geschnitten sein, die beim Scrollen seitlich gegeneinander gleiten und am Anfang zum ganzen Wort ausgerichtet sind.
Kopple die Verschiebung direkt an die Scrollposition, damit sie sich beim Zurückscrollen umkehrt, und halte die Überschrift für Screenreader als einen lesbaren Text.

Der Text ist um einen Kreis gesetzt, der sich ununterbrochen dreht.

Füge bei [wo] „Spinning Text“ hinzu (auch circular text oder text on circle genannt).
Die Buchstaben sollen gleichmäßig um einen Kreis verteilt sein, der sich langsam und gleichmäßig dreht, ohne Sprung beim Neustart der Schleife.
Gib Screenreadern den Text einmal als normalen Text und stoppe die Drehung bei reduzierter Bewegung (prefers-reduced-motion).

Eine Überschrift wird in Zeichen, Wörter oder Zeilen zerlegt, die mit kleiner Verzögerung nacheinander einlaufen.

Füge bei [wo] einen „Split Text Stagger“-Einstieg hinzu (auch letter stagger oder staggered text reveal genannt).
Zerlege die Überschrift in Buchstaben, die mit kurzer Verzögerung nacheinander nach oben gleiten und einblenden, schnell und weich, ohne Nachfedern.
Spiele ihn einmal ab, wenn die Überschrift ins Bild kommt, sorge dafür, dass Screenreader sie als ein Wort lesen, und zeige sie bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation.

Die Zeichen blättern um wie auf einer Abflugtafel am Flughafen, bis der Zielbuchstabe erscheint.

Füge bei [wo] eine Fallblattanzeige (Split-Flap Text) hinzu – auch text flipping board oder flip board genannt.
Jedes Zeichenfeld soll schnell durch das Alphabet blättern, bis es auf seinem Zielbuchstaben landet, wobei die Felder nacheinander von links nach rechts zur Ruhe kommen.
Lass sie jedes Mal einmal laufen, wenn der Text erscheint oder sich ändert, gib Screenreadern nur den finalen Text aus und zeige bei reduzierter Bewegung (prefers-reduced-motion) den finalen Text ohne Blättern.

Die Buchstabenkanten zittern wie handgezeichnet – erzeugt mit einem SVG-Displacement-Filter.

Füge bei [wo] einen „Squiggly Text“-Effekt hinzu (auch wobbly text oder turbulence text genannt).
Die Buchstabenkanten sollen leicht wackeln, als würden sie mehrmals pro Sekunde von Hand neu gezeichnet: ein dezentes, zittriges Brodeln statt einer weichen Welle.
Halte den Text lesbar und lass ihn bei reduzierter Bewegung (prefers-reduced-motion) still stehen.

Der Text bleibt fixiert, während seine Zeilen mit dem Scrollfortschritt ein- und ausblenden.

Füge bei [wo] einen „Sticky Text Fade“-Effekt hinzu (auch sticky scroll text opacity fade genannt).
Während der Abschnitt scrollt, soll der Textblock fixiert bleiben und seine Zeilen sollen nacheinander mit dem Scrollfortschritt ein- und ausblenden.
Kopple die Überblendungen direkt an die Scrollposition, damit sie sich beim Zurückscrollen umkehren, und halte jede Zeile unabhängig von ihrer Deckkraft für Screenreader verfügbar.

Die Buchstabenumrisse werden als Linie gezeichnet, bevor die Füllung erscheint.

Füge bei [wo] einen „Stroke Text Draw“-Effekt hinzu (auch draw in text oder animated stroke text genannt).
Die Buchstabenumrisse sollen sich weich selbst zeichnen, und sobald sie vollständig sind, soll die Füllung einblenden.
Spiele ihn einmal beim Laden ab, halte das Wort als echten Text zugänglich und zeige bei reduzierter Bewegung (prefers-reduced-motion) sofort den gefüllten Text.

Buchstaben oder Wörter drehen sich in 3D um eine Achse und zeigen auf ihrer Rückseite den nächsten Text.

Füge bei [wo] einen „Text 3D Flip“-Hover-Effekt hinzu (auch 3D flip text reveal genannt).
Wenn der Zeiger über dem Text ist, soll jeder Buchstabe in 3D um seine waagerechte Achse kippen und auf seiner anderen Seite einen neuen Buchstaben zeigen, nacheinander in einer schnellen, weichen Welle, und zurückkippen, wenn der Zeiger den Text verlässt.
Halte die Textbox während des Kippens gleich groß und zeige denselben Effekt beim Tastaturfokus.

Der Text verzerrt und kräuselt sich organisch, angetrieben durch Scrollen oder Zeigerbewegung.

Füge bei [wo] einen „Text Distortion“-Effekt hinzu (auch organic text distortion genannt).
Eine Textzeile soll endlos seitwärts fließen und sich dabei organisch verzerren und kräuseln, als sähe man sie durch bewegtes Wasser, wobei das Scrollen den Fluss antreibt.
Halte die Verzerrung so leicht, dass der Text lesbar bleibt, sorge dafür, dass sie auch auf langsameren Geräten flüssig läuft, und schalte sie bei reduzierter Bewegung (prefers-reduced-motion) ab.

Die Wörter blenden beim Laden der Seite nacheinander ein, oft während sich eine Unschärfe auflöst, als würden sie gerade generiert.

Füge bei [wo] einen „Text Generate“-Effekt hinzu.
Die Wörter sollen nacheinander einblenden, während sich bei jedem eine weiche Unschärfe auflöst, als würde der Text gerade generiert: gleichmäßig und ruhig.
Spiele ihn beim Laden nur einmal ab, lass Screenreader sofort den ganzen Text lesen und zeige ihn bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation an.

Ein farbiges Band wie von einem Textmarker zieht sich über eine Phrase, um sie hervorzuheben.

Füge bei [wo] einen Textmarker-Effekt („Text Highlighter“) hinzu, auch highlight marker oder marker underline genannt.
Ein farbiges Band wie von einem Textmarker soll sanft von links nach rechts hinter die wichtige Phrase gleiten, als würde jemand sie mit einem Stift markieren.
Spiele ihn nur einmal ab, wenn die Phrase ins Bild scrollt, halte den Text auf dem Band gut lesbar und lass das Band der Phrase korrekt folgen, wenn sie auf zwei Zeilen umbricht.

Ein Wort in Umrissschrift wird von einem Verlauf gefüllt oder beleuchtet, der dem Zeiger folgt oder darüber streicht.

Füge bei [wo] einen „Text Hover Effect“ hinzu (auch text fill on hover oder gradient outline text hover genannt).
Das Wort soll zunächst nur als Umriss erscheinen; solange der Zeiger darüber ist, soll sich eine volle Füllung sanft von links nach rechts hineinschieben und beim Verlassen wieder zurückziehen.
Halte das Umrisswort vor dem Füllen gut lesbar und zeige denselben Effekt beim Tastaturfokus.

Der Text folgt einem gekrümmten Pfad und wandert beim Scrollen daran entlang.

Füge bei [wo] einen „Text Path Scroll“-Effekt hinzu (auch text path curve scroll animation genannt).
Der Text soll auf einer geschwungenen Linie sitzen und beim Scrollen daran entlanggleiten: vorwärts beim Herunterscrollen, zurück beim Hochscrollen.
Kopple die Bewegung ohne Verzögerung direkt an die Scrollposition und halte den Text für Screenreader als normalen Text lesbar.

Ein Wort wird in viele gestapelte Kopien vervielfältigt, die sich beim Scrollen verschieben.

Füge bei [wo] einen „Text Repetition“-Effekt hinzu (auch repeated text scroll genannt).
Ein Wort soll in einen Stapel blasserer Umrisskopien vervielfältigt werden, die sich beim Scrollen hinter ihm auffächern und beim Hochscrollen wieder zusammenfalten.
Kopple das Auffächern direkt an die Scrollposition und verstecke die zusätzlichen Kopien vor Screenreadern, damit das Wort nur einmal vorgelesen wird.

Vorhandener Text wird animiert ausgeblendet und durch neuen Text ersetzt.

Füge bei [wo] einen „Text Replacement“-Effekt hinzu (auch text swap genannt).
Wenn sich der Text ändert, sollen die alten Zeichen nach oben hinausgleiten und die neuen von unten hereinkommen, Zeichen für Zeichen in einer schnellen, weichen Welle.
Verhindere, dass die Textbox beim Wechsel in der Größe springt, und lass Screenreader nur den neuen Text ansagen.

Die Wörter eines Absatzes gehen beim Scrollen von blass zu voller Deckkraft über.

Füge bei [wo] einen „Text Reveal“-Effekt hinzu (auch scroll text reveal oder word-by-word reveal genannt).
Der Absatz soll blass beginnen, und beim Scrollen soll ein Wort nach dem anderen auf volle Stärke aufhellen, gekoppelt an die Scrollposition.
Beim Hochscrollen sollen die Wörter wieder verblassen, und der ganze Absatz soll unabhängig von der Abdunklung für Screenreader verfügbar bleiben.

Wenn der Zeiger über eine Karte fährt, wird unter einer Maskenkante oder einem Spotlight verborgener Text sichtbar.

Füge bei [wo] einen „Text Reveal Card“-Effekt hinzu (auch spotlight text reveal genannt).
Wenn der Zeiger über die Karte fährt, soll ihm eine senkrechte Kante dicht folgen und auf einer Seite verborgenen Text freilegen: weich und direkt, ohne Verzögerung.
Auf Touch-Geräten, wo es keinen Zeiger gibt, soll Ziehen oder Tippen den verborgenen Text zeigen; mach den verborgenen Text außerdem für Screenreader zugänglich.

Der Text wird durch zufällige Zeichen ersetzt, die wechseln und sich nach und nach zum endgültigen Wort auflösen.

Füge bei [wo] einen „Text Scramble“-Hover-Effekt hinzu (auch text decode oder encrypted text genannt).
Wenn der Zeiger über den Text fährt, soll jeder Buchstabe schnell durch zufällige Zeichen flackern und auf seinem echten Buchstaben landen, einer nach dem anderen von links nach rechts.
Verhindere, dass die Textbreite beim Durchmischen springt, lass Screenreader den echten Text lesen und zeige denselben Effekt beim Tastaturfokus.

Der Text neigt sich in 3D-Perspektive und folgt dabei der Mausposition.

Füge bei [wo] einen „Text Tilt“-Effekt hinzu (auch perspective text tilt genannt).
Der Text soll sich sanft in 3D zum Zeiger neigen, ihm beim Bewegen weich folgen und beim Verlassen sanft wieder flach werden.
Halte die Neigung dezent, damit der Text lesbar bleibt, und lass ihn auf Touch-Geräten und bei reduzierter Bewegung (prefers-reduced-motion) flach.

Die Zeichen erscheinen einzeln, als würden sie getippt, meist gefolgt von einer blinkenden Einfügemarke.

Füge bei [wo] einen Schreibmaschineneffekt (Typewriter) hinzu, auch typing animation oder typing text genannt.
Die Zeichen sollen einzeln in gleichmäßigem Tipptempo erscheinen, mit einer Einfügemarke direkt hinter dem zuletzt getippten Zeichen, die nach dem Tippen ein paar Mal blinkt.
Spiele ihn nur einmal statt in Schleife ab, lass Screenreader sofort den ganzen Text lesen und zeige bei reduzierter Bewegung (prefers-reduced-motion) gleich den vollständigen Text.

Beim Hovern wächst unter einem Link eine Unterstreichung von einer Seite oder aus der Mitte heraus.

Füge bei [wo] einen „Underline Draw“-Hover-Effekt hinzu (auch animated underline oder hover underline animation genannt).
Wenn der Zeiger über dem Link ist, soll unter dem Text eine Unterstreichung sanft von links nach rechts wachsen und beim Verlassen wieder schrumpfen: schnell und dezent.
Verhindere, dass die Unterstreichung das umgebende Layout verschiebt, und zeige denselben Effekt beim Tastaturfokus.

Die Buchstaben werden über die Achsen einer variablen Schrift fließend fetter oder leichter (oder ändern Breite und Neigung).

Füge bei [wo] einen „Variable Font Weight Animation“-Hover-Effekt hinzu (auch font weight shift genannt).
Solange der Zeiger über dem Text ist, sollen die Buchstaben nacheinander in einer weichen Welle von links nach rechts fetter werden und beim Verlassen wieder dünner.
Nutze eine variable Schrift, damit sich die Stärke fließend statt sprunghaft ändert, verhindere, dass die breiter werdende Überschrift benachbarte Inhalte verschiebt, und zeige denselben Effekt beim Tastaturfokus.

Große Buchstaben wirken wie ein Fenster, in dem ein laufendes Video zu sehen ist.

Füge bei [wo] einen „Video Text“-Effekt hinzu (auch text video mask genannt).
Große, fette Buchstaben sollen wie ein Fenster zu einem laufenden Video wirken, sodass die bewegten Bilder nur innerhalb der Buchstabenformen zu sehen sind.
Lass das Video stumm und ohne Steuerelemente in Schleife laufen, stelle die Wörter für Screenreader als echten Text bereit und zeige bei reduzierter Bewegung (prefers-reduced-motion) ein Standbild.

Die Buchstaben wippen nacheinander auf und ab, sodass eine Welle durch das Wort läuft.

Füge bei [wo] einen „Wavy Text“-Effekt hinzu (auch text wave genannt).
Die Buchstaben sollen nacheinander auf und ab wippen, sodass ständig eine sanfte, weiche Welle durch das Wort läuft.
Lass die Schleife nahtlos laufen, sorge dafür, dass Screenreader es als ein Wort lesen, und stoppe die Welle bei reduzierter Bewegung (prefers-reduced-motion).

Ein Wort im Satz wird per Gleiten, Drehen oder Überblenden durch das nächste Wort einer Liste ersetzt.

Füge bei [wo] einen „Word Rotate“-Effekt hinzu (auch rotating words oder flip words genannt).
Ein Wort in der Zeile soll nach oben hinausgleiten, während das nächste Wort aus einer Liste von unten hereinkommt, mit einer Pause auf jedem Wort vor dem nächsten Wechsel.
Verhindere, dass der Rest der Zeile bei unterschiedlich breiten Wörtern springt, lass Screenreader nicht jeden Wechsel ansagen und stoppe den Wechsel bei reduzierter Bewegung (prefers-reduced-motion).

Ein organischer Blob verändert fortlaufend seine Umrissform.

Füge bei [wo] eine „Blob Morph“-Loop-Animation hinzu (auch morphing blob oder animated blob genannt).
Ein organischer Blob soll seine Umrissform langsam und ständig verändern und sich dabei sanft drehen: fließend und weich, ohne scharfe Ecken.
Mach die Schleife nahtlos, damit die Form nie springt, und lass sie bei reduzierter Bewegung (prefers-reduced-motion) stillstehen.

Nahe Formen verschmelzen per Weichzeichner- und Kontrastfilter wie flüssige Tropfen miteinander.

Füge bei [wo] einen „Gooey Effect“ hinzu (auch goo effect oder metaballs genannt).
Solange der Zeiger darüber ist, sollen sich kleine Tropfen von der Hauptform lösen, sich dabei wie Flüssigkeit dehnen und dann abreißen; verlässt der Zeiger die Fläche, fließen sie zurück und verschmelzen weich.
Wende den Weichzeichner- und Kontrastfilter nur auf die kleine Gruppe von Formen an, nicht auf die ganze Seite, und zeig denselben Effekt bei Tastaturfokus und Antippen.

Ein Icon wie das Hamburger-Menü verwandelt sich durch drehende und verschobene Balken in ein anderes (X).

Füge bei [wo] einen „Icon Morph“ hinzu (auch hamburger to X oder menu icon morph genannt).
Bei jedem Drücken sollen der obere und untere Balken erst zur Mitte zusammengleiten und sich dann zu einem X drehen, während der mittlere Balken ausblendet; erneutes Drücken kehrt es um: schnell und knackig.
Mach daraus einen echten Umschalt-Button, dessen zugängliches Label und Expanded-Zustand sich mitändern, und halte die Icongröße fest, damit sich drumherum nichts verschiebt.

Eine SVG-Kontur scheint sich entlang ihres Pfads selbst zu zeichnen, indem der Dash-Offset animiert wird.

Füge bei [wo] eine „Line Drawing“-Animation hinzu (auch path drawing oder self-drawing SVG genannt).
Jede Linie soll sich scheinbar selbst weich entlang ihres Pfads von Anfang bis Ende zeichnen, und eine zweite Linie wie ein Häkchen folgt direkt nach der ersten.
Spiele sie einmal ab, wenn sie ins Bild kommt, statt sie zu wiederholen, und zeige bei reduzierter Bewegung (prefers-reduced-motion) die fertig gezeichneten Linien.

Ein Element bewegt sich entlang eines eigenen gekrümmten Pfads und kann sich dabei in Laufrichtung drehen.

Füge bei [wo] eine „Motion Path“-Animation hinzu (auch animate along path genannt).
Ein kleines Element soll langsam und gleichmäßig einer eigenen gekrümmten Route folgen und sich dabei stets in Bewegungsrichtung drehen.
Nimm eine geschlossene Route, damit die Schleife ohne Sprung wiederholt, und lass die Route mit ihrem Container mitskalieren statt in fester Größe zu bleiben.

Kleine Kreise oder Icons kreisen auf runden Bahnen um einen Mittelpunkt.

Füge bei [wo] „Orbiting Circles“ hinzu (auch orbit animation oder orbiting icons genannt).
Kleine Kreise sollen langsam und gleichmäßig auf runden Ringen um ein zentrales Element kreisen, wobei sich der äußere Ring in die Gegenrichtung und langsamer dreht.
Halte die Schleife nahtlos und die kreisenden Elemente aufrecht, und stoppe die Drehung bei reduzierter Bewegung (prefers-reduced-motion).

Eine Vektorform verwandelt sich fließend in eine andere.

Füge bei [wo] einen „Shape Morph“ hinzu (auch path morphing oder SVG morph genannt).
Eine Form soll sich fließend in eine andere verwandeln, etwa ein Fünfeck, das sich zu einem Stern einschnürt, wobei die Punkte gleichmäßig und ohne Eile an ihren Platz gleiten.
Gib beiden Formen gleich viele zueinander passende Punkte, damit der Morph sauber und ohne Flackern bleibt, und spiele ihn einmal pro Zustandswechsel ab statt in Schleife.

Ein SVG-Filter verzerrt Text oder Formen mit animiertem Rauschen.

Füge bei [wo] einen „SVG Displacement Distortion“-Hover-Effekt hinzu (auch displacement map effect genannt).
Solange der Zeiger darüber ist, soll der Text oder die Form wellen und wabern, als sähe man sie durch bewegtes Wasser, sanft einsetzend, und beim Verlassen wieder scharf werden.
Wende den Verzerrungsfilter nur an, solange der Effekt aktiv ist, damit er im Ruhezustand nichts kostet, und zeig denselben Effekt bei Tastaturfokus.

Eine Maskenform wischt über die Fläche oder folgt dem Zeiger und legt den Inhalt darunter frei.

Füge bei [wo] einen „SVG Mask Reveal“-Hover-Effekt hinzu (auch clip-path reveal oder spotlight mask genannt).
Solange der Zeiger darüber ist, soll eine kreisförmige Maske aus der Mitte wachsen und den Inhalt darunter freilegen und sich beim Verlassen wieder schließen: weich und recht schnell.
Halte beide Ebenen exakt gleich groß, damit sich nichts verschiebt, und zeig dieselbe Enthüllung bei Tastaturfokus und Antippen.

Linien und Punkte bewegen sich animiert zwischen Orten auf einer Karte oder einem Globus.

Füge bei [wo] „Animated Map Arcs“ hinzu (auch globe arcs genannt).
Gekrümmte Linien sollen sich nacheinander zwischen Orten auf einer Punktekarte selbst zeichnen und sich dann zu ihrem Ziel zurückziehen, während dort ein weicher Ring pulsiert: ruhig und gleichmäßig.
Versetze die Bögen zeitlich, damit sie sich nie im Gleichtakt bewegen, halte die Schleife nahtlos und pausiere sie bei reduzierter Bewegung (prefers-reduced-motion).

Balken wachsen von der Höhe null bis zu ihren Datenwerten.

Füge bei [wo] eine „Bar Chart Grow“-Animation hinzu (auch animated bar chart oder bar chart entrance genannt).
Jeder Balken soll nacheinander in schneller Staffelung von der Grundlinie auf seinen Wert wachsen und beim Ankommen weich abbremsen.
Spiele sie einmal ab, wenn das Diagramm ins Bild kommt, und zeige bei reduzierter Bewegung (prefers-reduced-motion) sofort das fertige Diagramm.

Horizontale Balken tauschen im Zeitverlauf ihre Ränge, während sich die Werte ändern.

Füge bei [wo] ein „Bar Chart Race“ hinzu (auch racing bar chart genannt).
Horizontale Balken sollen wachsen und schrumpfen, während sich die Werte über die Zeit ändern, und bei jedem Rangwechsel weich aneinander vorbeigleiten, jeder mit seinem Label.
Bewege die Balken mit Transforms statt das Markup umzusortieren, damit Wechsel gleiten statt springen, und gib Nutzern eine Möglichkeit, es zu pausieren.

Diagrammelemente gehen fließend von alten zu neuen Werten über, wenn sich Daten ändern oder Datensätze umgeschaltet werden.

Füge bei [wo] eine „Chart Data Transition“ hinzu (auch chart update animation genannt).
Wenn sich die Daten ändern, sollen alle Balken gleichzeitig von ihrem alten zu ihrem neuen Wert gleiten, weich und ohne Eile, statt von null neu gezeichnet zu werden.
Starte jedes Update bei den aktuell angezeigten Werten, damit eine schnelle zweite Änderung nicht springt, und setze bei reduzierter Bewegung (prefers-reduced-motion) neue Werte sofort.

Ein Ring oder Kreisdiagramm füllt sich im Uhrzeigersinn bis zu seinem Prozentwert.

Füge bei [wo] eine „Donut Chart Fill“-Animation hinzu (auch pie chart sweep oder animated donut chart genannt).
Oben beginnend soll jedes Segment nacheinander im Uhrzeigersinn aufziehen, bis der Ring seinen Anteil zeigt, und am Ende weich abbremsen.
Spiele sie einmal ab, wenn das Diagramm ins Bild kommt, und stelle die tatsächlichen Werte für Screenreader als Text bereit.

Eine Zahl zählt von einem Start- zu einem Zielwert hoch, sobald sie sichtbar wird.

Füge bei [wo] einen „Number Ticker“ hinzu (auch count up oder animated counter genannt).
Sobald die Zahl ins Bild kommt, soll sie von null bis zu ihrem Zielwert hochzählen, anfangs schnell und zum Ende hin sanft abbremsend.
Nutze Ziffern mit fester Breite, damit drumherum nichts zittert, zähle nur einmal und zeige Screenreadern sowie bei reduzierter Bewegung (prefers-reduced-motion) sofort den Endwert.

Bei jeder Zahlenänderung rollt jede Ziffer vertikal zum neuen Wert.

Füge bei [wo] eine „Odometer“-Zahlenanimation hinzu (auch rolling numbers oder slot-machine digits genannt).
Ändert sich der Wert, soll jede Ziffer vertikal zu ihrer neuen Ziffer rollen, immer vorwärts, mit leichter Staffelung zwischen den Ziffern und einem kleinen Einrasten am Ende.
Halte alle Ziffern gleich breit, damit sich die Zahl nicht verschiebt, und gib Screenreadern nur den Endwert aus.

Ein farbiger Hintergrund wischt von einer Kante herein und schwingt elastisch leicht über.

Füge bei [wo] einen „Background Bounce Sweep“-Hover-Effekt hinzu.
Eine neue Hintergrundfarbe soll von einer Kante hereinwischen, mit elastischem Nachfedern leicht über die gegenüberliegende Kante hinausschießen und sich dann setzen, während die Textfarbe wechselt, damit alles lesbar bleibt; beim Verlassen gleitet sie sanft wieder hinaus.
Halte den Text über der Füllung und zeige denselben Effekt beim Tastaturfokus.

Hintergrund- und Textfarbe blenden beim Hovern weich in eine neue Farbe über.

Füge bei [wo] einen „Background Fade“-Hover-Effekt hinzu (auch color fade genannt).
Hintergrund- und Textfarbe sollen weich in neue Farben überblenden, solange der Zeiger über dem Element ist, und beim Verlassen zurückblenden: ruhig, ohne Bewegung.
Achte in beiden Zuständen auf genug Kontrast zwischen Text und Hintergrund und zeige denselben Effekt beim Tastaturfokus.

Ein farbiger Hintergrund wischt beim Hovern von einer Kante aus über das Element.

Füge bei [wo] einen „Background Sweep“-Hover-Effekt hinzu (auch background fill oder slide fill genannt).
Eine neue Hintergrundfarbe soll von der linken zur rechten Kante darüberwischen, weich und schnell, ohne Nachfedern, und sich beim Verlassen genauso zurückziehen, während die Textfarbe wechselt, damit alles lesbar bleibt.
Beschneide die Füllung auf die Form des Elements und zeige denselben Effekt beim Tastaturfokus.

Das Element schwebt nach oben und wippt dann beim Hovern fortlaufend auf und ab.

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.

Die Rahmenfarbe blendet beim Hovern ein oder wechselt weich.

Füge bei [wo] einen „Border Fade“-Hover-Effekt hinzu.
Der Rahmen soll weich von einem gedämpften Ton in die Akzentfarbe überblenden, solange der Zeiger über dem Element ist: dezent, ohne Bewegung oder Größenänderung.
Lass die Rahmenbreite in beiden Zuständen gleich, damit nichts verrutscht, und zeige denselben Effekt beim Tastaturfokus.

Konzentrische Rahmenringe breiten sich beim Hovern vom Element nach außen aus oder ziehen sich nach innen zusammen.

Füge bei [wo] einen „Border Ripple“-Hover-Effekt hinzu.
Wenn der Zeiger hineinfährt, sollen sich ein paar Rahmenringe nacheinander vom Element nach außen ausbreiten und verblassen: schnell und leicht, wie eine Welle im Wasser.
Spiel ihn einmal pro Hover ab statt in einer Schleife und lass die Ringe das umgebende Layout nicht verschieben.

Das Element skaliert mit elastischem Überschwingen, wenn das Hovern beginnt oder endet.

Füge bei [wo] einen „Bounce Scale“-Hover-Effekt hinzu (auch bounce in / out genannt).
Das Element soll sich federnd und sichtbar überschwingend etwas vergrößern, kurz über seine Endgröße hinausgehen und sich dann setzen, und beim Verlassen genauso zurückfedern.
Verhindere, dass sich das umgebende Layout verschiebt, und zeige denselben Effekt beim Tastaturfokus.

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.

Ein Overlay gleitet von der Seite herein, über die der Zeiger kam, und verschwindet zur Seite, über die er geht.

Füge bei [wo] einen „Direction Aware Hover“-Effekt hinzu (auch direction-aware overlay genannt).
Ein Overlay soll von der Seite hereingleiten, über die der Zeiger kam, und zu der Seite hinausgleiten, über die er das Element verlässt: schnell und weich.
Ermittle die Seite aus der Zeigerposition beim Betreten und Verlassen und nutze bei Touch oder Tastaturfokus eine feste Standardrichtung.

Icons in einer Reihe wachsen weich, wenn sich der Zeiger nähert, wie im macOS-Dock.

Füge bei [wo] einen „Dock Magnification“-Effekt hinzu (auch dock genannt).
Die Icons der Reihe sollen weich größer werden, je näher der Zeiger kommt, das nächste am größten und seine Nachbarn leicht vergrößert, und alle zur normalen Größe zurückkehren, wenn der Zeiger die Reihe verlässt.
Lass die Icons von einer festen Grundlinie aus nach oben wachsen und halte jedes Icon bei Touch und Tastatur in normaler Größe bedienbar.

Das Element hebt sich beim Hovern ein paar Pixel an, als würde es schweben.

Füge bei [wo] einen „Float“-Hover-Effekt hinzu (auch lift oder raise genannt).
Das Element soll sich ein Stück anheben und oben bleiben, solange der Zeiger darüber ist, und beim Verlassen zurücksinken: weich und sanft, ohne Nachfedern.
Bewege es nur optisch, ohne das umgebende Layout zu verschieben, und zeige denselben Effekt beim Tastaturfokus.

Benachbarte Karten werden unscharf und abgedunkelt, während die gehoverte Karte scharf bleibt.

Füge bei [wo] einen „Focus Cards“-Effekt hinzu (auch blur siblings on hover, hover focus blur oder card hover effect genannt).
Solange der Zeiger über einer Karte ist, sollen die anderen Karten unscharf, dunkler und etwas kleiner werden, während die gehoverte Karte scharf bleibt, alles mit einem weichen Übergang, der sich beim Verlassen umkehrt.
Wende denselben Fokus beim Tastaturfokus an und halte alle Karten scharf und lesbar, wenn nichts gehovert wird.

Beim Hovern erscheint ein farbiger Lichtschein rund um das Element.

Füge bei [wo] einen „Glow“-Hover-Effekt hinzu (auch neon glow genannt).
Ein weicher farbiger Lichtschein soll um das Element einblenden, solange der Zeiger darüber ist, und beim Verlassen ausblenden: sanft, ohne Bewegung.
Lass den Schein das Layout nicht beeinflussen und zeige denselben Effekt beim Tastaturfokus.

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.

Beim Hovern leert sich der gefüllte Hintergrund, sodass nur ein umrandeter Button bleibt.

Füge bei [wo] einen „Hollow“-Hover-Effekt hinzu (auch ghost fill genannt).
Der gefüllte Hintergrund soll ausblenden, sodass nur die Kontur bleibt, und die Beschriftung soll die Farbe wechseln, damit sie auf dem leeren Hintergrund lesbar bleibt: weich und schnell.
Halte die Rahmenstärke in beiden Zuständen gleich, damit sich die Größe des Elements nicht ändert, und zeige denselben Effekt beim Tastaturfokus.

Ein Verlaufsrahmen bewegt sich um das Element und breitet sich aus, sobald der Zeiger darüber ist.

Füge bei [wo] einen „Hover Border Gradient“-Effekt hinzu.
Ein kurzer Verlaufsschimmer soll auf einem Teil des Rahmens ruhen; solange der Zeiger über dem Element ist, soll er gleichmäßig um den Rahmen wandern, während der ganze Rahmen mit sanftem Glühen heller wird.
Animiere den Rahmen nur beim Hovern und lass ihn bei reduzierter Bewegung (prefers-reduced-motion) stillstehen.

Beim Hovern erscheint unter dem Element ein weicher Schatten oder wird tiefer und deutet so Erhöhung an.

Füge bei [wo] einen „Hover Shadow“-Effekt hinzu (auch drop shadow on hover oder elevation on hover genannt).
Ein weicher Schatten unter dem Element soll tiefer und breiter werden, solange der Zeiger darüber ist, damit es angehoben wirkt, und beim Verlassen wieder zurückgehen, während das Element selbst an seinem Platz bleibt.
Halte den Schatten dezent genug für helle und dunkle Themes und zeige denselben Effekt beim Tastaturfokus.

Eine durchscheinende Überlagerung tönt das Element und zeigt so, dass der Zeiger darüber ist.

Füge bei [wo] einen „Hover State Layer“ hinzu (auch hover state, state layer oder hover overlay genannt).
Eine schwache, durchscheinende Überlagerung in der Inhaltsfarbe soll schnell über dem Element einblenden, solange der Zeiger darüber ist, und beim Verlassen ausblenden.
Halte sie schwach, damit der Kontrast erhalten bleibt, und nutze denselben Layer-Ansatz für Fokus- und gedrückte Zustände.

Beim Hovern fällt ein Icon aus dem Sichtbereich und kehrt von oben zurück.

Füge bei [wo] einen „Icon Drop“-Hover-Effekt hinzu.
Das Icon im Element soll nach unten aus dem Sichtbereich fallen und dann von oben wieder an seinen Platz fallen: schnell, mit sanfter Landung.
Spiele ihn bei jedem Eintritt des Zeigers einmal ab statt in Schleife, und lass Beschriftung und Button-Größe unverändert.

Ein Icon schwebt aus dem Button und blendet aus, während ein neues hereinschwebt.

Füge bei [wo] einen „Icon Float Away“-Hover-Effekt hinzu.
Das aktuelle Icon soll nach oben wegschweben und ausblenden, während ein neues Icon von unten sanft an seinen Platz schwebt; beim Verlassen des Zeigers soll sich der Wechsel umkehren.
Halte die Button-Größe während des Wechsels fest und zeige denselben Effekt beim Tastaturfokus.

Ein Icon in einem Button dreht sich, wenn man über den Button hovert.

Füge bei [wo] einen „Icon Spin“-Hover-Effekt hinzu.
Das Icon im Element soll sich beim Eintritt des Zeigers sanft einmal ganz drehen und beim Verlassen zurückdrehen.
Drehe nur das Icon, nicht den ganzen Button, und zeige denselben Effekt beim Tastaturfokus.

Beim Hovern gleitet die Beschriftung hinaus, und ein Pfeil sowie eine Füllung breiten sich aus.

Füge bei [wo] einen „Interactive Hover Button“-Effekt hinzu.
Der kleine Punkt neben der Beschriftung soll sich ausdehnen, bis er den Button füllt, während die Beschriftung zur Seite gleitet und ausblendet; die Beschriftung mit einem Pfeil gleitet dann über die neue Füllung herein: weich und schnell.
Halte die Button-Größe fest und die Beschriftung jederzeit lesbar, und zeige denselben Effekt beim Tastaturfokus.

Beim Hovern gleitet ein Pfeil oder das Element selbst ein paar Pixel vor oder zurück.

Füge bei [wo] einen „Nudge Forward / Backward“-Hover-Effekt hinzu (auch arrow nudge genannt).
Der Pfeil soll ein kleines Stück in seine Zeigerichtung gleiten, solange der Zeiger über dem Element ist, und beim Verlassen zurückgleiten: schnell und knapp.
Bewege nur den Pfeil, ohne Beschriftung oder Layout zu verschieben, und zeige denselben Effekt beim Tastaturfokus.

Beim Hovern wächst eine Kontur vom Element nach außen oder zieht sich zu ihm zusammen.

Füge bei [wo] einen „Outline Expand“-Hover-Effekt hinzu.
Eine Kontur soll bündig an der Kante des Elements beginnen und nach außen wandern, bis ringsum eine kleine Lücke bleibt, dort beim Hovern stehen bleiben und sich beim Verlassen des Zeigers wieder schließen: weich und schnell.
Zeichne die Kontur so, dass sie die Größe des Elements nicht ändert und benachbarte Inhalte nicht verschiebt, und zeige denselben Effekt beim Tastaturfokus.

Beim Hovern wächst über dem Text eine Linie von links, aus der Mitte oder von rechts.

Füge bei [wo] einen „Overline Grow“-Hover-Effekt hinzu.
Eine Linie über dem Text soll aus der Mitte nach beiden Seiten wachsen, solange der Zeiger darüber ist, und beim Verlassen zur Mitte zurückschrumpfen: schnell und weich.
Reserviere Platz für die Linie, damit der Text nicht springt, und zeige denselben Effekt beim Tastaturfokus.

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 sinkt kurz ein und kommt zurück, als würde man einen echten Knopf drücken.

Füge bei [wo] einen „Push“-Hover-Effekt hinzu.
Bei jedem Eintritt des Zeigers soll das Element einmal schnell kleiner werden und auf seine normale Größe zurückfedern, als würde es wie ein echter Knopf hineingedrückt.
Spiele ihn einmal pro Hover ab statt in Schleife, und verhindere, dass sich das umgebende Layout verschiebt.

Beim Hovern wächst ein farbiger Kreis aus der Mitte oder schrumpft zu ihr hin, um das Element zu füllen.

Füge bei [wo] einen „Radial Fill“-Hover-Effekt hinzu (auch circle expand genannt).
Ein Kreis in der neuen Farbe soll sanft aus der Mitte wachsen, bis er das Element füllt, und beim Verlassen des Zeigers zur Mitte zurückschrumpfen, während die Beschriftung die Farbe wechselt, um lesbar zu bleiben.
Beschneide den Kreis auf die Form des Elements, halte die Beschriftung darüber und zeige denselben Effekt beim Tastaturfokus.

Beim Hovern dehnt sich ein Rechteck im Element aus oder zieht sich zusammen und ändert so den Hintergrund.

Füge bei [wo] einen „Rectangle Fill“-Hover-Effekt hinzu.
Die neue Hintergrundfarbe soll sich von allen vier Kanten her schließen, während ein inneres Rechteck zur Mitte schrumpft, und sich beim Verlassen des Zeigers wieder öffnen, während die Beschriftung die Farbe wechselt, um lesbar zu bleiben: weich und schnell.
Halte die Beschriftung über der Füllung und zeige denselben Effekt beim Tastaturfokus.

Das Element dreht sich beim Hovern um ein paar Grad.

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.

Die Ecken des Elements runden sich beim Hovern weich ab.

Füge bei [wo] einen „Round Corners“-Hover-Effekt hinzu.
Die spitzen Ecken des Elements sollen sich weich abrunden, solange der Zeiger darüber ist, und beim Verlassen wieder spitz werden: sanft und schnell.
Lass die Größe des Elements unverändert und zeige denselben Effekt beim Tastaturfokus.

Beim Hovern gleitet ein diagonaler Lichtstreifen von einer Seite zur anderen über das Element.

Füge bei [wo] einen „Shine Sweep“-Hover-Effekt hinzu (auch sheen, shiny button, shine on hover, glint, shimmer oder shimmer button genannt).
Ein weicher diagonaler Lichtstreifen soll von links nach rechts über das Element gleiten und sich mit einer kurzen Pause wiederholen, solange der Zeiger darüber bleibt.
Schneide den Streifen am Rand des Elements ab, stoppe ihn, wenn der Zeiger es verlässt, und spiele ihn bei reduzierter Bewegung (prefers-reduced-motion) nicht ab.

Das Element verkleinert sich weich ein wenig, solange der Zeiger darüber ist.

Füge bei [wo] einen „Shrink“-Hover-Effekt hinzu (auch scale down genannt).
Das Element soll sich weich ein wenig verkleinern, solange der Zeiger darüber ist, und beim Verlassen wieder wachsen: schnell und dezent.
Verhindere, dass sich das umgebende Layout verschiebt, und zeige denselben Effekt beim Tastaturfokus.

Beim Hovern öffnet oder schließt sich der Hintergrund wie Fensterläden von der Mitte oder von den Rändern aus.

Füge bei [wo] einen „Shutter Fill“-Hover-Effekt hinzu (auch shutter genannt).
Die neue Hintergrundfarbe soll sich von einer senkrechten Linie in der Mitte wie Fensterläden zu beiden Seiten öffnen und sich beim Verlassen wieder zur Mitte schließen, während die Schriftfarbe wechselt, damit der Text lesbar bleibt: weich und schnell.
Schneide die Füllung am Rand des Elements ab, halte den Text darüber und zeige denselben Effekt beim Tastaturfokus.

Beim Hovern rutscht das Element ein paar Pixel nach unten, als würde es in die Seite gedrückt.

Füge bei [wo] einen „Sink“-Hover-Effekt hinzu.
Das Element soll ein wenig nach unten rutschen und dort bleiben, solange der Zeiger darüber ist, als würde es in die Seite gedrückt, und beim Verlassen wieder hochkommen: weich, ohne Nachfedern.
Verschiebe es nur optisch, ohne das umgebende Layout zu bewegen, und zeige denselben Effekt beim Tastaturfokus.

Das Element neigt sich beim Hovern seitlich schräg.

Füge bei [wo] einen „Skew“-Hover-Effekt hinzu.
Das Element soll sich seitlich in eine leichte Schräglage neigen, solange der Zeiger darüber ist, und sich beim Verlassen wieder aufrichten: schnell und weich.
Halte den Text in der Schräglage lesbar, verhindere, dass sich das umgebende Layout verschiebt, und zeige denselben Effekt beim Tastaturfokus.

Beim Hovern erscheint an einer Seite des Elements ein kleines Sprechblasen-Dreieck.

Füge bei [wo] einen Sprechblasen-Hover-Effekt (Speech Bubble) hinzu, auch bubble genannt.
Ein kleiner dreieckiger Zipfel soll hinter einer Seite des Elements hervorgleiten und es zur Sprechblase machen, und beim Verlassen wieder zurückgleiten: schnell und weich.
Gib dem Zipfel dieselbe Farbe wie dem Element, damit beide als eine Form wirken, und zeige denselben Effekt beim Tastaturfokus.

Beim Hovern erscheint eine innere Randlinie knapp innerhalb der Kante des Elements.

Füge bei [wo] einen „Trim“-Hover-Effekt hinzu.
Eine dünne Linie soll knapp innerhalb der Kante des Elements einblenden, solange der Zeiger darüber ist, und beim Verlassen ausblenden: dezent, ohne Bewegung.
Halte die Linie innerhalb des Elements, damit sich seine Größe nicht ändert, und zeige denselben Effekt beim Tastaturfokus.

Eine Linie gleitet von der Unter- oder Oberkante an ihren Platz und unter- oder überstreicht das Element.

Füge bei [wo] einen „Underline Reveal“-Hover-Effekt hinzu (auch overline reveal oder reveal genannt).
Eine Linie über die volle Breite soll von knapp unterhalb der Unterkante nach oben an ihren Platz gleiten, solange der Zeiger über dem Element ist, und beim Verlassen wieder nach unten aus dem Blick gleiten: schnell und weich.
Schneide die Linie an der Kante ab, damit sie durch Gleiten erscheint statt durch Einblenden oder Wachsen, und zeige denselben Effekt beim Tastaturfokus.

Die Karte verschiebt und skaliert sich leicht, wenn sich der Zeiger über ihr bewegt.

Füge bei [wo] einen „Wobble Card“-Effekt hinzu.
Wenn sich der Zeiger über die Karte bewegt, soll sie sich leicht zu ihm hin verschieben, während ihr Inhalt sich leicht in die Gegenrichtung verschiebt und etwas vergrößert, weich folgend, und beim Verlassen kehrt alles an seinen Platz zurück.
Halte die Bewegung klein und schalte sie auf Touch-Geräten und bei reduzierter Bewegung (prefers-reduced-motion) ab.

Das Produktbild schrumpft und fliegt im Bogen in das Warenkorb-Symbol.

Füge bei [wo] eine „Add to Cart Fly“-Animation hinzu (auch fly to cart oder add-to-cart animation genannt).
Beim Drücken des Hinzufügen-Buttons soll eine kleine Kopie des Produktbilds schrumpfen, während sie in einem weichen, schnellen Bogen in das Warenkorb-Symbol fliegt, und der Warenkorb soll kurz anstupsen, während sich seine Anzahl aktualisiert.
Spiele sie einmal pro Klick ab, ohne die ursprüngliche Produktkarte zu bewegen, und lass den Flug bei reduzierter Bewegung (prefers-reduced-motion) weg, aktualisiere den Warenkorb aber trotzdem.

Beim Ankreuzen wird im Kästchen ein Häkchen Strich für Strich gezeichnet.

Füge bei [wo] eine „Checkbox Check Draw“-Animation hinzu (auch animated checkbox oder checkmark draw genannt).
Beim Ankreuzen soll sich das Kästchen mit Farbe füllen und das Häkchen sich in einem schnellen, weichen Strich selbst zeichnen; beim Abwählen wird es auf dieselbe Weise wieder gelöscht.
Lass es eine echte Checkbox mit ihrem checked-Zustand bleiben, die mit der Tastatur funktioniert und einen sichtbaren Fokusring hat.

Bunte Papierschnipsel schießen heraus und fallen herab, um einen Erfolg zu feiern.

Füge bei [wo] eine Konfetti-Feier (Confetti) hinzu, auch confetti burst genannt.
Kleine bunte Papierschnipsel sollen schnell aus dem Button herausschießen, dann taumelnd herabschweben und dabei ausblenden – ein kurzer, lebhafter Regen.
Löse sie einmal pro Erfolg aus statt in Schleife, lass sie keine Klicks auf der Seite blockieren und lass sie bei reduzierter Bewegung (prefers-reduced-motion) weg.

Das Kopieren-Symbol verwandelt sich in ein Häkchen, und die Beschriftung zeigt kurz Kopiert.

Füge bei [wo] eine „Copy-to-Clipboard Feedback“-Animation hinzu (auch copied state oder copy icon to checkmark genannt).
Beim Drücken des Kopieren-Buttons soll das Kopieren-Symbol schnell wegschrumpfen, während sich ein Häkchen einzeichnet und die Beschriftung zu „Kopiert“ wechselt; nach einem kurzen Moment kehrt alles weich zurück.
Halte den Button während des Wechsels gleich groß, damit sich nichts verschiebt, und gib den Kopiert-Zustand an Screenreader aus.

Ein Element folgt beim Ziehen dem Zeiger und lässt sich auf einen Bereich oder eine Achse begrenzen.

Füge bei [wo] eine „Drag“-Interaktion hinzu (auch draggable oder drag constraints genannt).
Das Element soll beim Ziehen direkt dem Zeiger folgen, an den Rändern seines erlaubten Bereichs anhalten und beim Loslassen mit einem kleinen Nachfedern an seinen Ruheplatz zurückspringen.
Sorge dafür, dass es mit Touch ebenso wie mit der Maus funktioniert, ohne dass die Seite darunter scrollt, und biete eine Möglichkeit, es mit der Tastatur zu bewegen.

Das Platzhalter-Label wandert nach oben und wird kleiner, sobald das Feld fokussiert oder ausgefüllt ist.

Füge bei [wo] ein „Floating Label“ hinzu (auch float label oder animated placeholder genannt).
Wenn das Feld fokussiert ist oder einen Wert hat, soll das Label, das darin sitzt, weich und schnell nach oben an die Oberkante des Felds gleiten und kleiner werden, und nur dann zurückwandern, wenn das Feld leer und nicht fokussiert ist.
Lass es ein echtes Label bleiben, das mit dem Input verknüpft ist, und sorge dafür, dass sich die Feldhöhe nicht ändert, damit das Formular nie springt.

Ein Herzsymbol füllt sich beim Klicken mit Farbe und sprüht kleine Partikel aus oder pulsiert.

Füge bei [wo] eine „Like / Heart Burst“-Animation hinzu (auch heart animation oder favorite toggle genannt).
Beim Liken soll sich das Herz mit Farbe füllen und federnd aufploppen, während ein Ring und kleine Punkte nach außen springen und verblassen, alles schnell und verspielt; beim Entliken leert sich das Herz einfach still.
Mach es zu einem echten Umschalt-Button mit gedrücktem Zustand und spiele den Burst nur beim Einschalten ab.

Hält man ein Element kurz gedrückt, löst das zusätzliche Aktionen oder eine Fortschrittsfüllung aus.

Füge bei [wo] eine „Long Press“-Interaktion hinzu (auch press and hold oder touch and hold genannt).
Solange das Element gedrückt gehalten wird, soll es leicht einsinken, während eine Fortschrittsfüllung gleichmäßig darüberläuft; ist sie voll, federt es zurück und öffnet sein Menü, und frühes Loslassen bricht ab und setzt die Füllung zurück.
Gib Tastatur- und Screenreader-Nutzern einen anderen Weg zu denselben Aktionen und verhindere, dass das Halten Text markiert oder das Kontextmenü des Browsers öffnet.

Ein Zähler-Badge ploppt auf, hüpft oder pulsiert, wenn eine neue Benachrichtigung eintrifft.

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.

Ein Augensymbol wechselt zwischen offen und durchgestrichen, wenn das Passwort ein- oder ausgeblendet wird.

Füge bei [wo] einen „Password Reveal Toggle“ hinzu (auch show/hide password oder eye icon toggle genannt).
Ein Druck auf das Auge soll den Schrägstrich schnell wegwischen, während die verdeckten Punkte in die echten Zeichen überblenden, und ein erneuter Druck zeichnet den Strich zurück und verbirgt sie wieder: weich und schnell, ohne Nachfedern.
Halte die Feldbreite stabil, damit der Text nicht springt, und mach den Schalter zu einem echten Button, dessen Beschriftung sagt, ob das Passwort sichtbar ist.

Ein Zeigerpfeil zeichnet einen Markierungsrahmen um ein Wort, sobald der Text ins Bild scrollt.

Füge bei [wo] einen „Pointer Highlight“-Effekt hinzu.
Wenn der Text ins Bild scrollt, soll sich ein Rahmen von links nach rechts um das Schlüsselwort zeichnen, während ein kleiner Zeigerpfeil an seiner Ecke entlangfährt, weich und gleichmäßig, als würde jemand das Wort von Hand markieren.
Zeichne ihn nur beim ersten Erscheinen, ohne den Text zu verschieben, und zeige den fertigen Rahmen bei reduzierter Bewegung (prefers-reduced-motion) sofort 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.

Zieht man eine Liste nach unten, erscheint ein Ladekreisel, und beim Loslassen wird der Inhalt neu geladen.

Füge bei [wo] eine „Pull to Refresh“-Interaktion hinzu (auch swipe to refresh genannt).
Wird die Liste oben nach unten gezogen, soll sie dem Finger mit etwas Widerstand folgen und einen Ladekreisel zeigen, der sich beim Ziehen dreht; nach dem Loslassen dreht er sich weiter, während der Inhalt neu lädt, dann gleitet die Liste sanft wieder nach oben.
Starte es nur, wenn die Liste schon ganz oben ist, und biete Tastatur- und Screenreader-Nutzern zusätzlich einen normalen Aktualisieren-Button.

Eine kreisförmige Welle breitet sich vom genauen Klick- oder Tippunkt aus und verblasst.

Füge bei [wo] einen „Ripple“-Effekt hinzu (auch material ripple oder ink ripple genannt).
Bei jedem Klick oder Tippen soll sich eine weiche, kreisförmige Welle vom genauen Druckpunkt ausbreiten, bis sie das Element bedeckt, und dabei verblassen: schnell und leicht.
Beschneide die Welle auf die Form des Elements, lass jeden schnellen Druck seine eigene Welle starten und starte sie bei Tastatureingaben aus der Mitte.

Ein Kreis und ein Häkchen zeichnen sich selbst, um zu bestätigen, dass eine Aktion geklappt hat.

Füge bei [wo] eine „Success Checkmark“-Animation hinzu (auch animated success tick genannt).
Ein Kreis soll sich in einem weichen Strich selbst zeichnen, dann erscheint das Häkchen darin, und das ganze Zeichen ploppt sanft ein wenig auf: ruhig und selbstsicher.
Spiele sie einmal ab, wenn die Aktion gelingt, ergänze eine Textmeldung, die Screenreader vorlesen können, und zeige bei reduzierter Bewegung (prefers-reduced-motion) sofort das fertige Zeichen.

Wischt man eine Listenzeile zur Seite, erscheinen Aktionsbuttons wie Löschen oder Archivieren.

Füge bei [wo] eine „Swipe to Delete“-Interaktion hinzu (auch swipe actions oder swipe to reveal genannt).
Wird eine Zeile zur Seite gezogen, soll sie direkt dem Finger folgen und dahinter Aktionsbuttons wie Archivieren und Löschen freilegen, bis diese ganz sichtbar sind, und beim Loslassen weich ohne Nachfedern an ihren Platz gleiten.
Halte vertikales Scrollen beim horizontalen Wischen funktionsfähig und mach dieselben Aktionen ohne Wischen per Tastatur und Screenreader erreichbar.

Ein runder Knopf gleitet über eine Schiene, und die Farbe der Schiene wechselt zwischen aus und an.

Füge bei [wo] eine „Toggle Switch“-Animation hinzu (auch switch genannt).
Beim Ein- oder Ausschalten soll der runde Knopf weich ans andere Ende der Schiene gleiten, während die Farbe der Schiene wechselt: schnell und knackig, ohne Nachfedern.
Mach ihn zu einem echten barrierefreien Schalter (role="switch" mit seinem checked-Zustand), der auch mit der Tastatur funktioniert.

Die Textmarke wächst oder schrumpft passend zur Größe des Zeichens, neben dem sie steht.

Füge bei [wo] einen „Adaptive Caret“-Effekt hinzu (auch adaptive caret size genannt).
Die Textmarke soll vor das Zeichen springen, das dem Zeiger am nächsten ist, und sich schnell auf dessen Höhe strecken oder stauchen, mit einer weichen, zackigen Größenänderung ohne Nachfedern.
Verhindere, dass sich der Text selbst verschiebt, und lass die Marke Tastaturbewegungen genauso folgen wie dem Zeiger.

Ein kreisförmiger Cursor invertiert die Farben darunter mit mix-blend-mode difference.

Füge bei [wo] einen „Blend-Mode Cursor“ hinzu (auch difference cursor oder inverting cursor genannt).
Ersetze den Zeiger durch einen gefüllten Kreis, der ohne Verzögerung direkt darunter sitzt und die Farben von Text und Formen invertiert, über die er fährt.
Begrenze das Blending auf diesen Bereich, damit es sich nicht mit dem Rest der Seite mischt, sorg dafür, dass es auch im Dark Mode klar invertiert, und behalte auf Touch-Geräten den normalen Cursor.

Eine Form oder ein Label folgt dem Zeiger mit federnder oder weich gebremster Verzögerung.

Füge bei [wo] einen „Cursor Follower“ hinzu (auch following pointer oder smooth cursor genannt).
Ein kleiner runder Marker soll dem Zeiger mit weicher, sanft gebremster Verzögerung folgen und genau dort ausgleiten, wo der Zeiger stehen bleibt, ohne nachzufedern.
Lass den echten Zeiger sichtbar, sorg dafür, dass der Marker nie Klicks blockiert, und lass ihn auf Touch-Geräten weg.

Ein Vorschaubild folgt dem Zeiger, während er über einem Eintrag einer Textliste schwebt.

Füge bei [wo] einen „Cursor Image Hover“-Effekt hinzu (auch hover image follow oder image preview on hover genannt).
Solange der Zeiger über einem Eintrag einer Textliste ist, soll ein kleines Vorschaubild dieses Eintrags neben dem Zeiger schweben, ihm mit leichter, weicher Verzögerung folgen und zum nächsten Bild gleiten, wenn der Zeiger zu einem anderen Eintrag wechselt.
Die Vorschau darf nie Klicks auf die Liste blockieren, und die Liste muss auf Touch-Geräten und per Tastatur auch ohne sie voll nutzbar bleiben.

Ein Lichtkreis um den Zeiger enthüllt den Inhalt, während der Rest dunkel bleibt.

Füge bei [wo] einen „Cursor Spotlight“-Effekt hinzu (auch flashlight cursor oder spotlight effect genannt).
Ein weicher Lichtkreis soll dem Zeiger folgen und den Inhalt darunter sichtbar machen, während der Rest des Bereichs abgedunkelt bleibt.
Zeige auf Touch-Geräten, wo es keinen Zeiger zum Folgen gibt, den Inhalt stattdessen voll ausgeleuchtet.

Hinter dem Mauszeiger bleibt beim Bewegen eine verblassende Spur aus Formen zurück.

Füge bei [wo] eine Mausspur (Cursor Trail) hinzu, auch mouse trail genannt.
Wenn sich der Zeiger bewegt, soll er eine kurze Kette kleiner Punkte hinterlassen, die jeweils schnell schrumpfen und verblassen, sodass die Spur kurz bleibt und den Weg weich nachzeichnet.
Zeichne die Spur nur, solange sich der Zeiger bewegt, lass sie nie Klicks blockieren und lass sie auf Touch-Geräten und bei reduzierter Bewegung (prefers-reduced-motion) weg.

Der Standardpfeil wird durch einen gestalteten Punkt oder Ring ersetzt, der sich über interaktiven Elementen verändert.

Füge bei [wo] einen „Custom Cursor“ hinzu (auch animated cursor oder cursor replacement genannt).
Ersetze den Standardpfeil durch einen kleinen Punkt, der dem Zeiger exakt folgt, und einen Ring, der ein wenig hinterherläuft, und lass den Ring über Links und Buttons weich größer werden.
Behalte auf Touch-Geräten und in Textfeldern den normalen Cursor und lass den eigenen Cursor nie Klicks blockieren.

Das Element wird zum Zeiger hingezogen, wenn er sich nähert, und schnellt zurück, sobald er sich entfernt.

Füge bei [wo] einen „Magnetic Button“-Effekt hinzu (auch magnetic target oder magnetic hover genannt).
Wenn sich der Zeiger nähert, soll der Button ein Stück zu ihm hingezogen werden, seine Beschriftung noch etwas weiter, und wenn der Zeiger weggeht, soll er mit einem kleinen federnden Nachschwingen an seinen Platz zurückkehren.
Das umgebende Layout darf sich nicht verschieben; schalte die Anziehung auf Touch-Geräten und bei reduzierter Bewegung (prefers-reduced-motion) ab.

Ein Feld kleiner Striche dreht sich zum Zeiger hin, wie Eisenspäne um einen Magneten.

Füge bei [wo] einen „Magnetic Filings“-Effekt hinzu.
Ein Raster kurzer Striche soll sich sofort so drehen, dass jeder direkt auf den Zeiger zeigt, wie Eisenspäne um einen Magneten, und ohne Zeiger sollen alle zur Mitte zeigen.
Halte es als dekorativen Hintergrund, der nie Klicks blockiert, und lass die Striche bei reduzierter Bewegung (prefers-reduced-motion) stillstehen.

Ein Inhaltsbereich wächst beim Umschalten seiner Kopfzeile weich auf volle Höhe oder schrumpft auf null.

Füge bei [wo] ein Akkordeon (Accordion Expand-Collapse) hinzu, auch collapse oder disclosure genannt.
Wenn eine Kopfzeile gedrückt wird, soll ihr Bereich weich auf die volle Höhe seines Inhalts wachsen und beim nächsten Drücken wieder ganz zuklappen, während sich der Pfeil in der Kopfzeile passend dreht: schnell und weich, ohne Nachfedern.
Animiere auf die echte Höhe des Inhalts statt auf einen festen Schätzwert, mach die Kopfzeile zu einem echten Button, der seinen aufgeklappten Zustand angibt, und sorg dafür, dass alles per Tastatur funktioniert.

Eine durchscheinende dunkle Ebene blendet hinter einem Overlay ein und dunkelt die Seite ab.

Füge bei [wo] einen „Backdrop Scrim Fade“ hinzu (auch overlay fade oder scrim genannt).
Wenn das Overlay aufgeht, soll eine durchscheinende dunkle Ebene sanft über der Seite dahinter einblenden, etwas langsamer als das Overlay selbst, und beim Schließen wieder ausblenden.
Halte den Scrim im hellen wie im dunklen Theme dunkel und verhindere, dass die Seite dahinter scrollt oder Klicks annimmt, solange er sichtbar ist.

Ein Panel gleitet vom unteren Rand herein, oft ziehbar und an festen Höhen einrastend.

Füge bei [wo] ein „Bottom Sheet Slide-Up“ hinzu (auch bottom drawer oder sheet genannt).
Das Panel soll vom unteren Rand hochgleiten, während die Seite dahinter abdunkelt, und weich abbremsend ohne Nachfedern an seinem Platz ankommen.
Spiel es bei jedem Öffnen einmal ab, lass es beim Schließen wieder nach unten gleiten und halte den Tastaturfokus im Sheet, solange es offen ist.

Die Slides bleiben an ihrem Platz und blenden ineinander über, statt zu gleiten.

Füge bei [wo] einen „Carousel Crossfade“ hinzu (auch fade slideshow oder carousel fade genannt).
Die Slides sollen an ihrem Platz bleiben und langsam ineinander überblenden – die alte blendet aus, während die nächste gleichzeitig einblendet – und dann ein paar Sekunden stehen bleiben bis zum nächsten Wechsel.
Springe nahtlos zurück zur ersten Slide, pausiere bei Hover oder Fokus und wechsle bei reduzierter Bewegung (prefers-reduced-motion) nicht automatisch weiter.

Slides ziehen horizontal durch einen sichtbaren Ausschnitt und rasten jeweils eine nach der anderen ein.

Füge bei [wo] ein „Carousel Slide“ hinzu (auch slider oder swipe carousel genannt).
Jeder Schritt soll die Reihe seitwärts schieben, sodass die nächste Slide in der Mitte einrastet, weich und abbremsend, während die Nachbarn an den Rändern hervorschauen und die Positionspunkte mitgehen.
Bewege immer eine Slide auf einmal, unterstütze Wischen auf Touch-Geräten ebenso wie Buttons und Pfeiltasten, und beschrifte die Steuerelemente für Screenreader.

Eine Karte wächst zur vollständigen Detailansicht, wobei ein einziger sichtbarer Container seine Form ändert und neue Inhalte zeigt.

Füge bei [wo] einen „Container Transform“-Übergang hinzu (auch card expand to detail oder expandable card genannt).
Wenn die Karte geöffnet wird, soll derselbe Container weich zur vollständigen Detailansicht wachsen: Der alte Inhalt blendet schnell aus, und der neue blendet ein, wenn das Wachsen fast fertig ist; beim Schließen läuft es rückwärts.
Halte es als einen durchgehenden Container statt einer Überblendung zwischen zwei getrennten Boxen, und setz den Fokus beim Öffnen in die Detailansicht.

Beim Ziehen eines Eintrags gleiten die anderen aus dem Weg und ordnen sich in der neuen Reihenfolge ein.

Füge bei [wo] eine „Drag-to-Reorder List“ hinzu (auch sortable list genannt).
Der gezogene Eintrag soll dem Zeiger direkt folgen und sich leicht abheben, während die anderen Einträge weich aus dem Weg gleiten; beim Loslassen soll er schnell in den nächstgelegenen Platz einrasten.
Unterstütze Touch ebenso wie Maus, und biete eine Möglichkeit, Einträge per Tastatur zu verschieben, wobei die neue Position für Screenreader angesagt wird.

Ein Seitenpanel gleitet vom linken, rechten oder oberen Rand herein und schiebt oder überdeckt den Inhalt.

Füge bei [wo] einen „Drawer Slide“ hinzu (auch off-canvas oder side sheet genannt).
Das Panel soll vom seitlichen Rand über den Inhalt hereingleiten, während die Seite dahinter abdunkelt, schnell und weich abbremsend, und beim Schließen auf demselben Weg wieder hinausgleiten.
Halte den Tastaturfokus im offenen Drawer, schließ ihn mit Escape oder einem Klick auf den abgedunkelten Bereich und gib den Fokus an den Button zurück, der ihn geöffnet hat.

Nach einer Layoutänderung gleiten die Elemente weich an ihre neuen Positionen und Größen.

Füge bei [wo] eine „FLIP Layout Animation“ hinzu (auch layout animation oder First-Last-Invert-Play genannt).
Wenn sich das Layout ändert, soll jedes Element von seiner alten Position zur neuen gleiten statt zu springen, anfangs schnell und dann sanft einrastend.
Animiere nur mit Transforms, damit die Seite nicht in jedem Frame neu umbricht, und wechsle bei reduzierter Bewegung (prefers-reduced-motion) direkt zum neuen Layout.

Einträge blenden beim Hinzufügen gleitend ein und beim Entfernen animiert aus, während die Nachbarn die Lücke schließen.

Füge bei [wo] eine „List Item Enter/Exit“-Animation hinzu (auch animated list genannt).
Ein neuer Eintrag soll zuerst seinen Platz öffnen und dann gleitend einblenden; ein entfernter Eintrag soll zuerst ausblenden und dann zusammenklappen, sodass die Nachbarn die Lücke weich schließen.
Lass einen entfernten Eintrag an seinem Platz, bis sein Ausblenden fertig ist, damit die Liste beim Hinzufügen oder Entfernen nie springt.

Eine Inhaltszeile läuft in einer endlosen, nahtlosen Schleife seitwärts durch.

Füge bei [wo] eine Laufschrift (Marquee) hinzu – ein endlos horizontal durchlaufendes Band, auch Ticker genannt.
Der Inhalt soll langsam und gleichmäßig von rechts nach links laufen, als nahtlose Schleife ohne sichtbaren Sprung.
Halte sie beim Hovern an und stoppe die Bewegung bei reduzierter Bewegung (prefers-reduced-motion).

Beim Filtern oder Sortieren ordnen sich Rasterkacheln neu an, blenden aus oder gleiten an neue Plätze.

Füge bei [wo] einen „Masonry / Grid Shuffle“-Effekt hinzu (auch filterable grid animation genannt).
Wenn ein Filter angewendet wird, sollen die Kacheln, die nicht mehr passen, an ihrem Platz schrumpfen und ausblenden, während die übrigen weich an ihre neuen Plätze gleiten; beim Zurücksetzen des Filters läuft es rückwärts.
Verhindere, dass die umgebende Seite springt, während sich die Höhe des Rasters ändert, und mach die Filter zu echten Buttons, die angeben, welcher Filter ausgewählt ist.

Ein Dialog blendet über der abgedunkelten Seite ein und wächst dabei leicht aus seiner Mitte.

Füge bei [wo] eine „Modal Scale-Fade In“-Animation hinzu (auch dialog open animation oder zoom-fade dialog genannt).
Der Dialog soll einblenden und dabei leicht aus seiner Mitte wachsen, während die Seite dahinter abdunkelt: schnell und dezent, ohne Nachfedern.
Spiel sie bei jedem Öffnen einmal ab, setz den Fokus in den Dialog und halte ihn dort, und nutze bei reduzierter Bewegung (prefers-reduced-motion) nur ein einfaches Einblenden.

Ein schwebendes Menü blendet ein und wächst dabei von der Stelle aus, an der sein Auslöser sitzt.

Füge bei [wo] eine „Popover / Dropdown Open“-Animation hinzu (auch menu pop oder dropdown scale-fade genannt).
Das Menü soll einblenden und dabei leicht aus der Ecke neben seinem Auslöser herauswachsen, schnell und knackig, und beim Schließen etwas schneller ausblenden.
Halte es am Auslöser verankert, schließe es mit Escape oder einem Klick außerhalb und gib den geöffneten Zustand am Auslöser für Screenreader an.

Ein Element scheint sich in ein passendes Element an neuer Stelle zu bewegen und seine Größe anzupassen, als wäre es dasselbe.

Füge bei [wo] eine „Shared Layout Animation“ hinzu (auch In-Page Shared Element genannt).
Wenn sich die Auswahl ändert, soll das Element sanft von seiner alten Position an die neue gleiten und dabei seine Größe anpassen, weich einrastend, sodass es als ein Objekt wirkt statt als zwei.
Zeige immer nur eine Kopie und verhindere, dass das umgebende Layout während der Bewegung springt.

Eine Unterstreichung oder Pille gleitet vom alten Tab zum neu ausgewählten Tab.

Füge bei [wo] einen „Tab Indicator Slide“ hinzu (auch sliding underline oder active tab indicator genannt).
Wird ein neuer Tab gewählt, soll die Unterstreichung vom alten zum neuen Tab gleiten, schnell und sanft abbremsend, und sich an die Breite des neuen Tabs anpassen, falls sie abweicht.
Behalte eine korrekte Tab-Semantik mit Navigation per Pfeiltasten bei und setze den Indikator bei reduzierter Bewegung (prefers-reduced-motion) ohne Gleiten um.

Eine kurze Meldung gleitet oder blendet am Bildschirmrand ein, bleibt kurz und verschwindet dann; gestapelte Toasts rücken zur Seite, um Platz zu machen.

Füge bei [wo] einen „Toast Slide-In“ hinzu (auch Snackbar oder Toast Notification genannt).
Jede Meldung soll vom Bildschirmrand hochgleiten und dabei einblenden, sanft abbremsend; kommt ein neuer Toast hinzu, sollen die bereits sichtbaren sanft zur Seite rücken, um Platz zu machen.
Kündige die Meldung für Screenreader an, ohne den Fokus zu stehlen, lass sie lange genug zum Lesen stehen und pausiere das automatische Schließen bei Hover oder Fokus.

Ein kleines Label blendet nach kurzer Hover-Verzögerung neben einem Element ein und rückt dabei leicht an seinen Platz.

Füge bei [wo] einen „Tooltip Fade“ hinzu (auch Tooltip Reveal genannt).
Nach einer kurzen Hover-Verzögerung soll das Label einblenden und dabei leicht neben das Element rücken, dann ohne Verzögerung schnell verschwinden, sobald der Zeiger es verlässt.
Zeige ihn auch bei Tastaturfokus, lass ihn mit Escape schließen und verknüpfe ihn mit dem Element, damit Screenreader ihn vorlesen.

Die neue Ansicht erscheint in einem Kreis, der sich vom Klickpunkt aus ausdehnt.

Füge bei [wo] einen „Circular Reveal“-Übergang hinzu (auch clip-path circle expand oder theme toggle reveal genannt).
Die neue Ansicht soll in einem Kreis erscheinen, der vom gedrückten Bedienelement aus wächst, bis er die ganze Fläche bedeckt: weich und gleichmäßig, sanft beschleunigend und abbremsend.
Lass den Kreis genau dort beginnen, wo gedrückt wurde, und wechsle bei reduzierter Bewegung (prefers-reduced-motion) sofort ohne Kreis.

Die alte Seite blendet aus, während die neue im selben Bereich einblendet.

Füge bei [wo] eine „Crossfade Page Transition“ hinzu (auch Cross-Dissolve oder Fade Transition genannt).
Beim Navigieren soll die alte Seite ausblenden, während die neue gleichzeitig im selben Bereich einblendet: weich und recht schnell.
Halte beide Seiten an derselben Stelle, damit sich während der Überblendung nichts verschiebt, und setze den Fokus nach dem Wechsel auf die Hauptüberschrift der neuen Seite.

Massive Paneele wischen über den Bildschirm, verdecken die alte Seite und ziehen sich dann zurück, um die neue freizugeben.

Füge bei [wo] einen „Curtain / Panel Wipe“-Seitenübergang hinzu (auch Page Wipe oder Staggered Panels genannt).
Massive Paneele sollen nacheinander hereinwischen und die alte Seite verdecken, die Seite soll wechseln, während sie ganz verdeckt ist, und die Paneele sollen dann weiter aus dem Bild ziehen und die neue freigeben: kraftvoll und flüssig.
Zeige die neue Seite nie, bevor die Paneele die alte verdeckt haben, und nutze bei reduzierter Bewegung (prefers-reduced-motion) stattdessen eine einfache Überblendung.

Der ausgehende Inhalt blendet vollständig aus, dann blendet der neue Inhalt mit leichter Skalierung ein.

Füge bei [wo] einen „Fade Through“-Seitenübergang hinzu (auch Fade-Through Transition oder Out-In Route Transition genannt).
Zuerst soll der ausgehende Inhalt schnell und vollständig ausblenden, danach der neue Inhalt einblenden und dabei leicht auf seine Größe anwachsen.
Lass die beiden nie überlappen und verhindere, dass sich das Layout des neuen Inhalts beim Skalieren verschiebt.

Eine bildschirmfüllende Intro-Ebene mit Logo oder Zähler gleitet oder blendet weg und gibt die Website frei.

Füge bei [wo] einen „Preloader Curtain Lift“ hinzu (auch Splash Screen oder Intro Loader genannt).
Eine bildschirmfüllende Intro-Ebene soll stehen bleiben, während sich ein Ladebalken füllt, und dann sanft nach oben weggleiten, um die Website freizugeben, die darunter weich an ihren Platz rückt.
Spiele ihn nur beim ersten Laden ab, halte die Seite nie länger auf, als das Laden tatsächlich dauert, und lass ihn bei reduzierter Bewegung (prefers-reduced-motion) weg.

Aus- und eingehender Inhalt bewegen sich gemeinsam entlang der X-, Y- oder Z-Achse und blenden dabei, um ihre räumliche Beziehung zu zeigen.

Füge bei [wo] einen „Shared Axis“-Seitenübergang hinzu (auch Shared Axis X/Y/Z genannt).
Beim Vorwärtsgehen soll der alte Inhalt ein kurzes Stück zur Seite gleiten und schnell ausblenden, während der neue von der anderen Seite hereingleitet und kurz danach einblendet; beim Zurückgehen kehrt sich die Richtung um.
Halte den Weg kurz, damit er die Richtung nur andeutet, und passe die Achse an die Navigation an: seitlich für Geschwisterseiten, vertikal für Schritte, Tiefe für Drill-down.

Ein passendes Element, etwa ein Vorschaubild, verwandelt sich in Position und Größe von einer Seite zur nächsten.

Füge bei [wo] eine „Shared Element Transition“ hinzu (auch Hero Transition oder view-transition-name morph genannt).
Beim Wechsel zur nächsten Seite soll das passende Element, etwa ein Vorschaubild, sanft an seinen Platz auf der neuen Seite gleiten und wachsen, während der übrige Inhalt überblendet, und beim Zurückgehen wieder schrumpfen.
Gib den passenden Elementen auf beiden Seiten eine gemeinsame Identität, damit sie richtig zusammenfinden, und nutze eine einfache Überblendung, wo der Browser sie nicht verwandeln kann.

Die neue Seite gleitet von einer Seite herein, während die alte hinausgleitet; die Richtung folgt der Navigationstiefe.

Füge bei [wo] eine „Slide Page Transition“ hinzu (auch Push / Pop oder Directional Slide genannt).
Beim Vorwärtsgehen soll die neue Seite von der Seite hereinschieben, während die alte zur anderen Seite hinausgleitet; beim Zurückgehen sollen sich beide in die Gegenrichtung bewegen: weich, sanft beschleunigend und abbremsend.
Kopple die Richtung an die Navigationstiefe, auch beim Zurück-Button des Browsers, und verhindere, dass die Seite während des Gleitens seitlich scrollt.

Die alte Seite skaliert größer oder kleiner und blendet aus, während die neue in ihre Größe hineinskaliert.

Füge bei [wo] eine „Zoom Page Transition“ hinzu (auch Scale Transition oder Zoom In / Out genannt).
Beim Hineinnavigieren soll die alte Seite leicht größer werden und ausblenden, während die neue von etwas kleiner auf ihre Größe anwächst; beim Zurückgehen soll sie umgekehrt herauszoomen: weich und schnell.
Halte die Skalierung dezent, damit der Inhalt durchgehend lesbar bleibt, und nutze bei reduzierter Bewegung (prefers-reduced-motion) eine einfache Überblendung.

Senkrechte Balken wachsen und schrumpfen phasenversetzt, wie ein Audio-Equalizer.

Füge bei [wo] eine „Bar Loader (Equalizer)“-Ladeanimation hinzu (auch Bars Loader oder Audio Bars genannt).
Ein paar senkrechte Balken sollen sich phasenversetzt strecken und stauchen wie ein Audio-Equalizer, in lebhaftem, aber gleichmäßigem Tempo.
Halte die Schleife nahtlos, gib ihr ein Status-Label für Screenreader und stoppe die Bewegung bei reduzierter Bewegung (prefers-reduced-motion).

Eine winzige, unscharfe Version des Bildes hält den Platz und wird scharf, sobald das volle Bild geladen ist.

Füge bei [wo] einen „Blur-Up Placeholder“-Bildladeeffekt hinzu (auch LQIP oder Blur Placeholder genannt).
Eine winzige, stark unscharfe Version des Bildes soll sofort den Platz des Bildes füllen, und sobald das volle Bild geladen ist, soll es sanft und recht schnell scharf werden.
Reserviere die exakte Bildgröße, damit sich beim Laden nichts verschiebt, und beschneide die unscharfen Ränder, damit sie nicht über den Rahmen hinausragen.

Eine Reihe von Punkten hüpft, blendet oder skaliert nacheinander.

Füge bei [wo] „Bouncing Dots“ hinzu (auch dots loader oder three-dot loader genannt).
Die Punkte sollen nacheinander hochhüpfen und landen, in einem leichten, federnden Rhythmus, mit einer kurzen Pause, bevor die Abfolge von vorn beginnt.
Halte die Schleife nahtlos, gib ihr ein Status-Label für Screenreader und stoppe die Bewegung bei reduzierter Bewegung (prefers-reduced-motion).

Ein Button ersetzt seine Beschriftung durch einen kleinen Spinner oder ergänzt ihn, solange eine Aktion läuft.

Füge bei [wo] einen „Button Loading State“ hinzu (auch spinner button oder loading button genannt).
Beim Drücken soll der Button leicht einsinken, seine Beschriftung ausblenden und an ihrer Stelle einen kleinen Spinner zeigen, solange die Aktion läuft; danach kommt die Beschriftung zurück.
Halte die Breite des Buttons beim Laden fest, blockiere wiederholtes Drücken und melde den Busy-Zustand an Screenreader.

Ein Ring oder Bogen dreht sich fortlaufend, um anzuzeigen, dass etwas lädt.

Füge bei [wo] einen „Circular Spinner“ hinzu (auch spinner oder throbber genannt).
Ein Bogen soll gleichmäßig um einen blassen Ring rotieren und sich dabei verlängern und verkürzen, weich und fließend.
Halte die Rotation nahtlos, gib ihm ein Lade-Label für Screenreader und verlangsame oder stoppe ihn bei reduzierter Bewegung (prefers-reduced-motion).

Ein Balken füllt sich von links nach rechts im Verhältnis zum Fortschritt der Aufgabe.

Füge bei [wo] einen Fortschrittsbalken (Determinate Progress Bar) hinzu, auch progress bar fill oder progress indicator genannt.
Der Balken soll sich im Takt des echten Fortschritts von links nach rechts füllen, zwischen den Updates weich übergehen und daneben den Prozentwert zeigen.
Nutze die passende Fortschrittsbalken-Semantik mit aktuellem, minimalem und maximalem Wert, damit Screenreader ihn vorlesen können, und lass die Füllung nie zurücklaufen.

Ein Balkensegment gleitet immer wieder über die Spur, wenn die Dauer unbekannt ist.

Füge bei [wo] einen „Indeterminate Linear Progress“-Balken hinzu (auch indeterminate progress bar genannt).
Ein kurzes Segment soll immer wieder von einem Ende der Spur zum anderen gleiten, schnell und weich, solange die Dauer der Aufgabe unbekannt ist.
Lass das Segment vollständig in die Spur hinein- und wieder herauslaufen, damit die Schleife keine sichtbare Naht hat, und kennzeichne ihn für Screenreader als beschäftigten Fortschrittsbalken.

Eine Liste von Schritten wird nacheinander hervorgehoben oder abgehakt, während eine lange Aufgabe fortschreitet.

Füge bei [wo] einen „Multi-Step Loader“ hinzu (auch step loader oder checklist loader genannt).
Die Schritte sollen nacheinander von oben nach unten aufleuchten, und jeder soll beim Abschluss ein kleines Häkchen bekommen, das kurz aufploppt, in ruhigem, gut lesbarem Tempo.
Schalte die Schritte nach dem echten Fortschritt der Aufgabe weiter statt nach einem festen Timer, und melde jeden abgeschlossenen Schritt an Screenreader.

Ein Bogen wächst um einen Ring, um den erreichten Prozentsatz zu zeigen.

Füge bei [wo] einen „Progress Ring“ hinzu (auch circular progress oder radial progress genannt).
Oben beginnend soll ein Bogen im Uhrzeigersinn um den Ring wachsen, um den erreichten Prozentsatz zu zeigen, und beim Ankommen sanft abbremsen, während die Zahl in der Mitte mit hochzählt.
Halte Bogen und Zahl synchron und stelle den Wert mit passender Fortschrittsbalken-Semantik für Screenreader bereit.

Graue Platzhalterblöcke blenden sanft ein und aus, um das Laden anzuzeigen.

Füge bei [wo] einen „Pulse Placeholder“ hinzu (auch skeleton pulse genannt).
Graue Platzhalterblöcke in der Form des kommenden Inhalts sollen langsam und gemeinsam heller werden und zurückblenden, in einem sanften, gleichmäßigen Rhythmus.
Passe die Platzhalter an das echte Layout an, damit nichts springt, wenn der Inhalt kommt, und lass sie bei reduzierter Bewegung (prefers-reduced-motion) stillstehen.

Über graue Platzhalterformen gleitet ein heller Lichtschimmer.

Füge bei [wo] einen „Skeleton Shimmer“ hinzu (auch skeleton wave oder shimmer effect genannt).
Ein weiches Lichtband soll von links nach rechts über die grauen Platzhalterformen gleiten und vor dem nächsten Durchlauf kurz pausieren: fließend und ohne Eile.
Passe die Platzhalterformen an das echte Layout an, damit nichts springt, wenn der Inhalt lädt, und zeige bei reduzierter Bewegung (prefers-reduced-motion) statische Platzhalter.

Ein dünner Balken am oberen Seitenrand kriecht während der Navigation voran und schließt ab, sobald die Seite geladen ist.

Füge bei [wo] einen Ladebalken (Top Loading Bar) hinzu, auch page progress bar genannt.
Ein dünner Balken am oberen Rand soll zuerst schnell vorschießen und dann immer langsamer kriechen, solange die Seite lädt; wenn das Laden fertig ist, soll er ans Ende sausen und ausblenden.
Lass ihn nie das Ende erreichen, bevor das Laden wirklich abgeschlossen ist, und sorge dafür, dass er den Seiteninhalt weder verdeckt noch verschiebt.

Drei Punkte in einer Sprechblase pulsieren oder heben sich nacheinander, um zu zeigen, dass jemand oder eine KI schreibt.

Füge bei [wo] einen „Typing Indicator“ hinzu (auch typing dots genannt).
Punkte in einer kleinen Chat-Blase sollen nacheinander aufsteigen und heller werden, in einem weichen, sanften Rhythmus, solange die Gegenseite schreibt.
Halte die Schleife nahtlos, entferne die Blase, sobald die Nachricht ankommt, und gib Screenreadern statt der Punkte einen kurzen Statustext.

Ein leuchtender Impuls wandert entlang einer Linie, die zwei Elemente verbindet.

Füge bei [wo] einen „Animated Beam“-Effekt hinzu (auch connecting beam genannt).
Ein kurzer leuchtender Impuls soll entlang der Linie wandern, die zwei Elemente verbindet, gleichmäßig von einem Ende zum anderen und dann von vorn: weich und ruhig.
Lass die Verbindungslinie selbst immer sichtbar und halte den Impuls bei reduzierter Bewegung (prefers-reduced-motion) still.

Die Farben eines Verlaufshintergrunds verschieben, bewegen oder drehen sich langsam.

Füge bei [wo] einen „Animated Gradient“-Hintergrund hinzu (auch gradient animation oder moving gradient genannt).
Die Farben des Verlaufs sollen langsam über die Fläche ziehen, in einem weichen, stetigen Fluss, ohne sichtbaren Sprung beim Neustart der Schleife.
Halte den Text darüber auf jeder Farbe lesbar und stoppe die Bewegung bei reduzierter Bewegung (prefers-reduced-motion).

Ein Raster aus Linien oder Quadraten, dessen Zellen ein- und ausblenden oder flackern.

Füge bei [wo] einen „Animated Grid Pattern“-Hintergrund hinzu (auch flickering grid oder grid background genannt).
Ein blasses Linienraster soll an Ort und Stelle bleiben, während einige verstreute Zellen zu unterschiedlichen Zeiten langsam ein- und ausblenden: leise und dezent, nie alle gleichzeitig.
Halte es hinter dem Inhalt, ohne Klicks abzufangen, und stoppe das Flackern bei reduzierter Bewegung (prefers-reduced-motion).

Weiche, verschwommene Farbbänder ziehen wie ein Polarlicht hinter dem Inhalt vorbei.

Füge bei [wo] einen „Aurora Background“ hinzu (auch northern lights gradient genannt).
Weiche, verschwommene Farbbänder sollen langsam hinter dem Inhalt treiben und schwingen, sich überlagern und ineinanderfließen wie Nordlichter: sehr langsam und verträumt.
Halte den Text darüber lesbar, berechne die Unschärfe nicht in jedem Frame neu, damit es flüssig bleibt, und stoppe das Treiben bei reduzierter Bewegung (prefers-reduced-motion).

Dünne, leuchtende Linien wandern entlang von Pfaden und zerplatzen manchmal, wenn sie auf eine Fläche treffen.

Füge bei [wo] einen „Background Beams“-Effekt hinzu (auch light beams oder background lines genannt).
Blasse, geschwungene Pfade sollen im Hintergrund liegen, während kurze leuchtende Streifen nacheinander an ihnen entlangwandern, in ruhigem, gleichmäßigem Tempo.
Versetze die Strahlen zeitlich, damit sie sich nie im Gleichschritt bewegen, halte sie hinter dem Inhalt und stoppe sie bei reduzierter Bewegung (prefers-reduced-motion).

Ein schräges Raster aus Kacheln leuchtet farbig auf, wenn der Zeiger darüberfährt.

Füge bei [wo] einen „Background Boxes“-Effekt hinzu (auch tile hover background genannt).
Fülle die Fläche mit einem schrägen Kachelraster; jede Kachel, über die der Zeiger fährt, soll sofort aufleuchten und dann langsam verblassen, sodass eine kurze Spur entsteht.
Leg die Kacheln hinter den Inhalt, damit sie keine Klicks darauf blockieren, und lass auf Touch-Geräten stattdessen die angetippte Kachel aufleuchten.

Ein heller Lichtpunkt wandert am Rand einer Karte entlang.

Füge bei [wo] einen „Border Beam“-Effekt hinzu (auch shine border oder moving border genannt).
Ein kurzer, heller Lichtstreifen soll in gleichmäßigem, gemächlichem Tempo am Kartenrand entlangwandern und ohne sichtbaren Sprung in Schleife laufen.
Der Effekt darf Inhalt und Größe der Karte nicht verändern; stoppe den Lichtstreifen bei reduzierter Bewegung (prefers-reduced-motion).

Ein Punktraster pulsiert oder leuchtet in Wellen auf.

Füge bei [wo] einen „Dot Pattern Glow“-Hintergrund hinzu (auch dotted glow background oder dot grid genannt).
Ein feines Punktraster soll stillstehen, während ein weiches Lichtband langsam darüberzieht und die Punkte aufleuchten lässt, die es passiert: ruhig und dezent.
Halte die Punkte so blass, dass der Inhalt darüber lesbar bleibt, und stoppe das Leuchten bei reduzierter Bewegung (prefers-reduced-motion).

Eine leuchtende Lampenlinie wird breiter und wirft einen Lichtkegel auf die Überschrift darunter.

Füge bei [wo] einen „Lamp Effect“ hinzu (auch lamp glow genannt).
Wenn der Abschnitt ins Bild kommt, soll sich eine dünne, leuchtende Linie von der Mitte aus verbreitern und einen weichen Lichtkegel auf die Überschrift darunter werfen, die dabei nach oben einblendet: langsam und fließend.
Spiele ihn nur einmal ab und zeige die beleuchtete Überschrift bei reduzierter Bewegung (prefers-reduced-motion) sofort an.

Weiche Lichtstrahlen schwingen über den Hintergrund.

Füge bei [wo] einen „Light Rays“-Hintergrund hinzu (auch god rays oder light shafts genannt).
Mehrere weiche, halbtransparente Strahlen sollen sich von oben fächerförmig ausbreiten und sanft hin und her schwingen, dabei leicht heller und dunkler werden: langsam und stimmungsvoll.
Leg die Strahlen hinter den Inhalt, halte sie blass genug für gute Lesbarkeit und stoppe sie bei reduzierter Bewegung (prefers-reduced-motion).

Mehrere Farbpunkte verschmelzen weich miteinander und treiben dahin, sodass ein organischer, vielfarbiger Hintergrund entsteht.

Füge bei [wo] einen „Mesh Gradient“-Hintergrund hinzu (auch animated mesh gradient genannt).
Mehrere weiche Farbflecken sollen ineinanderfließen und langsam über die Fläche treiben, sodass sich der Hintergrund organisch ständig verändert: sehr langsam und fließend.
Sorge dafür, dass der Inhalt darüber bei jeder Farbmischung lesbar bleibt, und stoppe das Treiben bei reduzierter Bewegung (prefers-reduced-motion).

Diagonale Streifen mit leuchtenden Schweifen fallen über eine Karte oder einen Abschnitt.

Füge bei [wo] einen „Meteors“-Effekt hinzu (auch meteor shower oder shooting stars genannt).
Eine Handvoll kleiner Streifen mit verblassenden Schweifen soll zu zufälligen Zeitpunkten diagonal über die Fläche schießen, jeder schnell und dann verschwunden.
Halte es bei wenigen, damit es ein Akzent bleibt, schneide sie an den Rändern der Fläche ab und stoppe sie bei reduzierter Bewegung (prefers-reduced-motion).

Eine feine, gesprenkelte Textur liegt über der Seite und flimmert manchmal wie Filmkorn.

Füge bei [wo] ein „Noise / Grain Texture“-Overlay hinzu (auch film grain oder noise background genannt).
Eine feine, blasse, gesprenkelte Textur soll über der Fläche liegen und in kleinen Sprüngen wie Filmkorn flimmern: dezent, nie so stark, dass der Inhalt trüb wirkt.
Lass Klicks durch das Overlay hindurch, erzeuge die Textur einmal statt in jedem Frame und lass sie bei reduzierter Bewegung (prefers-reduced-motion) stillstehen.

Viele kleine Punkte treiben über den Hintergrund, verbinden sich oder reagieren auf den Zeiger.

Füge bei [wo] einen „Particles“-Hintergrund hinzu (auch floating particles oder particle field genannt).
Kleine Punkte in verschiedenen Größen sollen langsam auf sanften, umherwandernden Bahnen schweben und treiben, jeder in seinem eigenen Tempo: ruhig und luftig.
Halte die Anzahl der Punkte moderat, damit es auch auf langsameren Geräten leicht bleibt, pausiere es außerhalb des sichtbaren Bereichs und stoppe es bei reduzierter Bewegung (prefers-reduced-motion).