Back Out
Das Element schrumpft und gleitet zu einem Rand hinaus, während es ausblendet.
Einsatz
Karten verwerfen
Varianten
- up
- down
- left
- right
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 „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.Ähnliche Animationen
A
Das Element federt leicht nach und schrumpft dann oder fliegt zu einem Rand hinaus.
Einsatz
Verspieltes Schließen
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.A
Zoom Out
Auch genannt Scale Out
Das Element schrumpft und blendet aus, bis es verschwindet.
Einsatz
Schließen von Modals und Entfernen von Elementen
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.A
Slide Out
Auch genannt Slide Out Up, Slide Out Down
Das Element gleitet über einen Containerrand hinaus und verschwindet.
Einsatz
Schließen von Drawern und Panels
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.A
Fade Out Directional
Auch genannt Fade Out Up, Fade Out Down
Das Element blendet aus und gleitet dabei in eine Richtung davon.
Einsatz
Benachrichtigungen und Karten verwerfen
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.Mehr aus Entrance & Exit
ABCD
Blur In
Auch genannt Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
Das Element startet stark verschwommen und wird scharf, oft während es hereingleitet oder einblendet.
Einsatz
Einblenden von Überschriften und Hero-Texten
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.ABCD
Blur Out
Auch genannt Text Blur Out, Slide Out Blurred, Smoky Text Dissipate
Das Element verschwimmt zunehmend, während es ausblendet oder hinausgleitet.
Einsatz
Weiche Übergänge und Text-Ausblendungen
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.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.