Das Element dreht sich um einen Drehpunkt und blendet dabei aus.
Einsatz
Verspieltes Entfernen von Elementen
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.
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.
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.
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.