Rotate Out
Das Element dreht sich um einen Drehpunkt und blendet dabei aus.
Einsatz
Verspieltes Entfernen von Elementen
Varianten
- center
- down-left
- down-right
- up-left
- up-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 „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.Ähnliche Animationen
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.A
Das Element schwingt an einem Scharnier oben links herab, baumelt und fällt dann aus dem Bildschirm.
Einsatz
Comichaftes Entfernen eines Elements
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.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.Mehr aus Entrance & Exit
A
Slide In
Auch genannt Slide In Up, Slide In Down, Slide In Left, Slide In Right
Das Element gleitet von jenseits des Containerrands an seine Ruheposition, ohne einzublenden.
Einsatz
Drawer, Seitenpanels, Banner
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.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.Stagger
Auch genannt Staggered Animation, Cascade
Die Elemente einer Gruppe animieren nacheinander mit kleiner Verzögerung und bilden eine Welle, statt alle gleichzeitig zu erscheinen.
Einsatz
Listen, Raster, Navigationsmenüs und Suchergebnisse
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.