Flip Out

L’élément pivote en 3D autour de son axe horizontal ou vertical, de la tranche jusqu’à faire face au spectateur.

Ajoute une animation d’entrée « Flip In » (aussi appelée flip in X ou flip in Y) sur [où].
L’élément doit partir de la tranche et pivoter autour de son axe horizontal pour faire face au spectateur, en dépassant légèrement puis en revenant avant de se stabiliser : rapide, avec une petite oscillation.
Donne-lui de la perspective pour que la rotation se lise en profondeur, et affiche-le de face sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément fait un tour complet autour de l’axe Y en s’approchant légèrement du spectateur puis en revenant.

Ajoute une animation « Flip » sur [où].
L’élément doit faire un tour complet autour de son axe vertical en s’approchant légèrement du spectateur, puis revenir avec une infime baisse de taille : vif mais bref.
Donne-lui de la perspective pour que la rotation se lise en profondeur, joue-la une seule fois plutôt qu’en boucle, et supprime la rotation si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément rétrécit et s’estompe jusqu’à disparaître.

Ajoute une animation de sortie « Zoom Out » (aussi appelée scale out) sur [où].
L’élément doit rétrécir vers son centre en s’estompant jusqu’à disparaître : rapide, en accélérant.
Ne le retire de la mise en page et du focus clavier qu’une fois disparu, et masque-le instantanément si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément pivote sur une charnière en haut à gauche, se balance, puis tombe hors de l’écran.

Ajoute une animation de sortie « Hinge » sur [où].
L’élément doit basculer depuis son coin supérieur gauche comme si une vis s’était desserrée, se balancer d’avant en arrière, puis tomber hors de l’écran en disparaissant en fondu : lent, comique et délibéré.
Laisse-le tomber par-dessus le reste du contenu sans pousser la mise en page ni ajouter de barres de défilement, retire-le une fois tombé, et masque-le immédiatement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément jaillit d’un état réduit et incliné, dépasse puis se stabilise comme un diable en boîte.

Ajoute une animation d’entrée « Jack In The Box » sur [où].
L’élément doit jaillir d’un état minuscule et incliné, ancré sur son bord inférieur, se balancer d’un côté à l’autre au-delà de la verticale, puis se stabiliser : élastique et ludique.
Joue-la une seule fois et affiche l’élément à sa place sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément surgit d’un côté, incliné, puis se redresse en arrivant.

Ajoute une animation d’entrée « Light Speed In » (aussi appelée lightspeed in) sur [où].
L’élément doit surgir rapidement d’un côté, incliné comme s’il filait à toute vitesse, corriger une fois son inclinaison un peu trop loin puis se redresser en arrivant : rapide et spectaculaire, avec un ralentissement à la fin.
Évite qu’il crée une barre de défilement horizontale tant qu’il est encore hors de l’écran, et affiche-le à sa place sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).