Flip Out

Das Element dreht sich in 3D um seine waagerechte oder senkrechte Achse von der Kante aus, bis es dem Betrachter zugewandt ist.

Füge bei [wo] eine „Flip In“-Einblendanimation hinzu (auch flip in X oder flip in Y genannt).
Das Element soll von der Kante aus starten und sich um seine waagerechte Achse zum Betrachter drehen, dabei leicht über das Ziel hinaus- und zurückschwingen, bevor es zur Ruhe kommt: schnell, mit kleinem Nachwackeln.
Gib ihm Perspektive, damit die Drehung als Tiefe wirkt, und zeige es bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation nach vorn gerichtet an.

Das Element dreht sich einmal ganz um die Y-Achse und kommt dabei kurz leicht auf den Betrachter zu.

Füge bei [wo] eine „Flip“-Animation hinzu.
Das Element soll sich einmal ganz um seine senkrechte Achse drehen und dabei leicht auf den Betrachter zukommen, dann mit einem winzigen Einknicken der Größe zurückfinden: lebendig, aber kurz.
Gib ihm Perspektive, damit die Drehung als Tiefe wirkt, spiele sie einmal statt in Schleife ab und lass die Drehung bei reduzierter Bewegung (prefers-reduced-motion) weg.

Das Element schrumpft und blendet aus, bis es verschwindet.

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.

Das Element schwingt an einem Scharnier oben links herab, baumelt und fällt dann aus dem Bildschirm.

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.

Das Element springt aus einem kleinen, gedrehten Zustand hervor, schießt über und pendelt sich ein wie ein Springteufel.

Füge bei [wo] eine „Jack In The Box“-Einblendanimation hinzu.
Das Element soll aus einem winzigen, schräg gestellten Zustand an seiner Unterkante verankert hochschnellen, über die Senkrechte hinaus hin und her schaukeln und sich dann einpendeln: federnd und verspielt.
Spiele sie nur einmal ab und zeige das Element bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation an seinem Platz an.

Das Element schießt schräg geneigt von der Seite herein und richtet sich beim Ankommen gerade auf.

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.