Entrance & Exit

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.