Skew

L’élément pivote de quelques degrés au survol.

Ajoute un effet de survol « Rotate » sur [où].
L’élément doit pivoter légèrement dans le sens des aiguilles d’une montre tant que le pointeur le survole, puis revenir quand il sort : fluide et discret.
Évite que la mise en page autour ne bouge, et affiche le même effet au focus clavier.

L’élément se déforme d’un côté à l’autre avec une amplitude décroissante, comme une gelée qui tremblote.

Ajoute un effet d’attention « Jello » (aussi appelé jelly) sur [où].
L’élément doit se déformer d’un côté à l’autre comme une gelée qui tremblote : fort au début, puis se stabilisant rapidement.
Joue-le une fois au déclenchement et conserve l’encombrement de l’élément pour que le contenu voisin ne bouge pas.

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).

Au survol, un petit triangle de bulle apparaît sur un côté de l’élément.

Ajoute un effet au survol « Speech Bubble » (aussi appelé bubble) sur [où].
Une petite pointe triangulaire doit glisser de derrière un côté de l’élément pour lui donner une forme de bulle, puis rentrer quand le pointeur sort : rapide et fluide.
Donne à la pointe la même couleur que l’élément pour qu’ils forment une seule forme, et applique le même effet au focus clavier.

Au survol, un filet intérieur apparaît juste à l’intérieur du bord de l’élément.

Ajoute un effet au survol « Trim » sur [où].
Un filet fin doit apparaître en fondu juste à l’intérieur du bord de l’élément tant que le pointeur est dessus, puis disparaître quand il sort : discret, sans mouvement.
Garde le filet à l’intérieur de l’élément pour que sa taille ne change pas, et applique le même effet au focus clavier.

Une ligne glisse depuis le bord inférieur ou supérieur jusqu’à sa place pour souligner ou surligner l’élément par le haut.

Ajoute un effet au survol « Underline Reveal » (aussi appelé overline reveal ou reveal) sur [où].
Une ligne pleine largeur doit remonter en glissant jusqu’à sa place depuis juste sous le bord inférieur tant que le pointeur est sur l’élément, puis redescendre hors de vue quand il sort : rapide et fluide.
Rogne la ligne au bord pour qu’elle apparaisse en glissant plutôt qu’en fondu ou en s’allongeant, et applique le même effet au focus clavier.