Light Speed Out
Auch genannt Lightspeed Out
Das Element neigt sich und rast zur Seite davon, während es ausblendet.
Einsatz
Dramatisches Ausblenden
Varianten
- to right
- to left
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 „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.Ähnliche Animationen
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
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
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
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 rollt wie ein Rad von links herein und blendet dabei ein.
Einsatz
Verspielter Auftritt von Listeneinträgen
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.A
Das Element rollt nach rechts davon und blendet dabei aus.
Einsatz
Verspieltes Entfernen von Listeneinträgen
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.