Ping

Des cercles concentriques s’étendent depuis un point central et s’estompent.

Ajoute un effet « Ripple Rings » (aussi appelé background ripple ou concentric ripples) sur [où].
Des anneaux doivent s’étendre sans cesse depuis un point central et s’estomper en grandissant, régulièrement espacés l’un après l’autre : lent et régulier.
Garde l’élément central immobile à sa place et arrête les ondes si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément grossit ou s’estompe doucement, puis revient, de façon répétée.

Ajoute un effet « Pulse » (aussi appelé pulsing) sur [où].
L’élément doit gonfler doucement puis revenir selon un rythme lent et régulier : discret, sans rebond.
Fais-le tourner en boucle sans coupure sans décaler la mise en page autour, et arrête-le 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.

Des anneaux de bordure concentriques s’étendent vers l’extérieur ou se resserrent vers l’intérieur au survol.

Ajoute un effet au survol « Border Ripple » sur [où].
Quand le pointeur entre, quelques anneaux de bordure doivent s’étendre depuis l’élément l’un après l’autre puis s’estomper : rapide et léger, comme une onde.
Joue-le une fois par survol au lieu de le faire boucler et ne laisse pas les anneaux décaler la mise en page autour.

L’élément s’étire en largeur et s’écrase en hauteur par à-coups élastiques avant de reprendre sa forme normale.

Ajoute un effet d’attention « Rubber Band » (aussi appelé rubberband) sur [où].
L’élément doit s’étirer en largeur et s’écraser en hauteur, puis revenir par quelques petits rebonds élastiques avant de se stabiliser à sa taille normale.
Joue-le une fois au déclenchement et empêche la mise en page autour de se décaler pendant qu’il s’étire.

L’élément tremble rapidement d’avant en arrière sur un seul axe.

Ajoute un effet « Shake » (aussi appelé error shake ou invalid input shake) sur [où].
L’élément doit trembler rapidement de gauche à droite quelques fois et s’arrêter exactement à son point de départ : rapide et ferme.
Joue-le une fois à chaque erreur plutôt qu’en boucle, et associe-le à un message d’erreur visible pour que le sens ne repose pas uniquement sur le mouvement.