Jack In The Box
Das Element springt aus einem kleinen, gedrehten Zustand hervor, schießt über und pendelt sich ein wie ein Springteufel.
Einsatz
Überraschendes Aufdecken
Prompt
Ersetze [wo] durch die Stelle auf deiner Seite und füge den Prompt in deinen KI-Agenten ein. Jeder Prompt enthält den Namen der Animation – beim nächsten Mal reicht es, sie beim Namen zu nennen.
Füge bei [wo] eine „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.Ähnliche Animationen
A
Bounce In
Auch genannt Bounce In Down, Bounce In Up
Das Element erscheint mit einem federnden Überschwingen und Einpendeln, entweder wachsend oder von einem Rand hereinfallend.
Einsatz
Benachrichtigungs-Badges und verspielte Modals
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.A
Swirl In
Auch genannt Swirl In Forward
Das Element dreht sich und wächst aus einem Punkt heraus, während es einblendet.
Einsatz
Auftritt von Deko-Elementen oder Logos
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.A
Rotate In
Auch genannt Rotate In Down Left
Das Element dreht sich um eine Ecke oder seine Mitte herein und blendet dabei ein.
Einsatz
Verspielter Auftritt von Icons oder Karten
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.A
Back In
Auch genannt Back In Up, Back In Down
Das Element startet verkleinert und versetzt, gleitet dann herein und wächst auf volle Größe.
Einsatz
Hero-Elemente und Karten
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.Mehr aus Entrance & Exit
A
Light Speed In
Auch genannt Lightspeed In
Das Element schießt schräg geneigt von der Seite herein und richtet sich beim Ankommen gerade auf.
Einsatz
Dramatischer Auftritt für Banner oder Überschriften
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.A
Light Speed Out
Auch genannt Lightspeed Out
Das Element neigt sich und rast zur Seite davon, während es ausblendet.
Einsatz
Dramatisches Ausblenden
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.A
Puff In / Puff Out
Auch genannt Puff
Das Element schrumpft aus einem großen, unscharfen, transparenten Zustand in die Schärfe wie eine Rauchwolke, beim Verlassen umgekehrt.
Einsatz
Sanftes Erscheinen von Objekten
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.