Wobble

L’élément oscille de gauche à droite avec une légère rotation, comme une tête qui fait non.

Ajoute un effet d’attention « Head Shake » (aussi appelé headshake ou no shake) sur [où].
L’élément doit pivoter rapidement de gauche à droite avec une légère torsion, comme une tête qui fait non, chaque mouvement plus petit que le précédent jusqu’à s’immobiliser.
Joue-le une fois à chaque déclenchement, par exemple lors d’une action refusée, et empêche la mise en page autour de bouger.

L’élément se balance d’un côté à l’autre depuis son bord supérieur, comme un pendule dont l’amplitude décroît.

Ajoute un effet d’attention « Swing » sur [où].
L’élément doit se balancer d’un côté à l’autre comme une enseigne suspendue, avec un grand mouvement au départ qui s’amortit vite.
Fais-le pivoter depuis son bord supérieur plutôt que depuis son centre, et joue-le une fois au déclenchement.

L’élément grossit, se trémousse en pivotant puis reprend sa taille, comme pour célébrer.

Ajoute un effet d’attention « Tada » sur [où].
L’élément doit rapetisser légèrement, puis grandir et se trémousser de gauche à droite avec une inclinaison rapide avant de reprendre sa taille normale, comme une petite célébration.
Joue-le une fois, par exemple juste après une réussite, et supprime-le si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

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 sautille de haut en bas avec des rebonds de plus en plus faibles.

Ajoute un effet d’attention « Bounce » sur [où].
L’élément doit sauter puis retomber en quelques rebonds rapides, de plus en plus petits, avec un léger écrasement à chaque atterrissage.
Joue-le une seule fois au déclenchement plutôt qu’en boucle, et désactive-le si l’utilisateur a activé la réduction des animations.

L’élément clignote en faisant varier rapidement son opacité.

Ajoute un effet d’attention « Flash » (aussi appelé blink) sur [où].
L’élément doit clignoter en disparaissant puis réapparaissant rapidement deux fois, puis rester entièrement visible.
Joue-le une seule fois plutôt qu’en clignotement sans fin, et désactive-le si l’utilisateur a activé la réduction des animations, car un clignotement rapide peut être gênant.

L’opacité de l’élément vacille de façon irrégulière, comme une lampe défaillante.

Ajoute un effet « Flicker » (aussi appelé flickering) sur [où].
L’élément doit rester stable la plupart du temps et baisser d’intensité par brefs à-coups irréguliers, comme un néon défaillant.
Garde un rythme irrégulier plutôt que régulier, évite les flashs rapides à pleine intensité, et arrête-le si l’utilisateur a activé la réduction des animations.