Pop

L’élément change d’échelle avec un dépassement élastique au début ou à la fin du survol.

Ajoute un effet au survol « Bounce Scale » (aussi appelé bounce in / out) sur [où].
L’élément doit grossir légèrement avec un dépassement élastique bien visible, en allant brièvement au-delà de sa taille finale avant de se stabiliser, puis rebondir de la même façon quand le pointeur sort.
Évite que la mise en page autour ne bouge et applique le même effet au focus clavier.

L’élément s’agrandit légèrement et en douceur quand le pointeur le survole.

Ajoute un effet au survol « Grow » (aussi appelé scale up) sur [où].
L’élément doit s’agrandir légèrement et en douceur tant que le pointeur est dessus, puis reprendre sa taille quand il sort : rapide et subtil.
Évite que la mise en page autour ne bouge et applique le même effet au focus clavier.

L’élément grossit et rétrécit selon un double battement, comme un cœur qui bat.

Ajoute un effet « Heartbeat » (aussi appelé heart beat) sur [où].
L’élément doit gonfler puis se relâcher en un double battement rapide, puis marquer une courte pause avant le suivant, comme un cœur qui bat.
Fais-le tourner en boucle sans coupure en gardant la pause entre les battements, 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.

L’élément s’enfonce puis revient, comme un bouton physique qu’on presse.

Ajoute un effet de survol « Push » sur [où].
À chaque entrée du pointeur, l’élément doit rétrécir une fois rapidement puis reprendre sa taille normale d’un petit rebond, comme un bouton physique qu’on enfonce.
Joue-le une fois par survol plutôt qu’en boucle, et évite que la mise en page autour ne bouge.

Au survol, un cercle coloré s’agrandit depuis le centre ou se rétracte vers lui pour remplir l’élément.

Ajoute un effet de survol « Radial Fill » (aussi appelé circle expand) sur [où].
Un cercle de la nouvelle couleur doit s’agrandir en douceur depuis le centre jusqu’à remplir l’élément, puis se rétracter vers le centre quand le pointeur sort, pendant que la couleur du libellé change pour rester lisible.
Garde le cercle découpé dans la forme de l’élément et le libellé au-dessus, et affiche le même effet au focus clavier.

Au survol, un rectangle s’agrandit ou se rétracte à l’intérieur de l’élément pour en changer le fond.

Ajoute un effet de survol « Rectangle Fill » sur [où].
La nouvelle couleur de fond doit se refermer depuis les quatre bords à mesure qu’un rectangle intérieur rétrécit vers le centre, puis se rouvrir quand le pointeur sort, pendant que la couleur du libellé change pour rester lisible : fluide et rapide.
Garde le libellé au-dessus du remplissage, et affiche le même effet au focus clavier.