Zoom Out
Auch genannt Scale Out
Das Element schrumpft und blendet aus, bis es verschwindet.
Einsatz
Schließen von Modals und Entfernen von Elementen
Varianten
- center
- down
- left
- right
- up
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 „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.Ähnliche Animationen
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.A
Das Element schrumpft und gleitet zu einem Rand hinaus, während es ausblendet.
Einsatz
Karten verwerfen
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.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
Mit der Maus darüberfahren
Shrink
Auch genannt Scale Down
Das Element verkleinert sich weich ein wenig, solange der Zeiger darüber ist.
Einsatz
Buttons, Kacheln
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.Mehr aus Entrance & Exit
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.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.