Flip In

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.

Eine Karte dreht sich um eine Achse halb herum und zeigt ihre Rückseite.

Füge bei [wo] einen „Card Flip“-Effekt hinzu (auch flip card oder card flip 3D genannt).
Wenn der Zeiger über der Karte ist, soll sie sich perspektivisch um ihre senkrechte Achse umdrehen und ihre Rückseite zeigen, beim Verlassen dreht sie sich zurück: weich und gleichmäßig.
Blende die Rückseite jeder Fläche aus, damit die beiden nie durcheinander durchscheinen, und lass das Umdrehen auch beim Tastaturfokus und per Tippen auf Touch-Geräten funktionieren.

Das Element dreht sich in 3D, bis es auf der Kante steht und unsichtbar ist.

Füge bei [wo] eine „Flip Out“-Ausblendanimation hinzu (auch flip out X oder flip out Y genannt).
Das Element soll sich leicht nach hinten neigen und dann um seine senkrechte Achse drehen, bis es auf der Kante steht und verschwunden ist: schnell und knackig.
Gib ihm Perspektive, damit die Drehung als Tiefe wirkt, entferne das Element erst nach dem Ende der Drehung und blende es bei reduzierter Bewegung (prefers-reduced-motion) sofort aus.

Buchstaben oder Wörter drehen sich in 3D um eine Achse und zeigen auf ihrer Rückseite den nächsten Text.

Füge bei [wo] einen „Text 3D Flip“-Hover-Effekt hinzu (auch 3D flip text reveal genannt).
Wenn der Zeiger über dem Text ist, soll jeder Buchstabe in 3D um seine waagerechte Achse kippen und auf seiner anderen Seite einen neuen Buchstaben zeigen, nacheinander in einer schnellen, weichen Welle, und zurückkippen, wenn der Zeiger den Text verlässt.
Halte die Textbox während des Kippens gleich groß und zeige denselben Effekt beim Tastaturfokus.

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.