Bounce

L’élément s’élève puis flotte de haut en bas en continu tant qu’il est survolé.

Ajoute un effet au survol « Bob » (aussi appelé hang) sur [où].
L’élément doit s’élever un peu, puis continuer à flotter doucement de haut en bas tant que le pointeur reste dessus, et redescendre quand il sort : lent et doux.
Ne fais boucler le mouvement que pendant le survol et garde l’élément immobile si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément entre avec un rebond qui dépasse puis se stabilise, en grandissant ou en tombant depuis un bord.

Ajoute une animation d’entrée « Bounce In » (aussi appelée bounce in down ou bounce in up) sur [où].
L’élément doit grandir à partir d’une petite taille, dépasser sa taille normale et osciller quelques fois avant de se stabiliser : rapide et élastique.
Joue-la une seule fois pour qu’elle n’attire pas l’attention en continu, et affiche l’élément à sa place sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un badge de compteur apparaît d’un coup, rebondit ou pulse à l’arrivée d’une nouvelle notification.

Ajoute une animation « Notification Badge Bounce » (aussi appelée badge pop ou ping) sur [où].
À l’arrivée d’une nouvelle notification, le badge de compteur doit surgir de nulle part et se poser avec deux petits rebonds rapides et élastiques, pendant qu’un anneau doux s’en échappe une fois.
Joue-la une fois par nouvelle notification plutôt qu’en boucle, et annonce le nouveau compte aux lecteurs d’écran.

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.

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.