Background Sweep

Un fond coloré balaie l’élément depuis un bord avec un léger dépassement élastique.

Ajoute un effet au survol « Background Bounce Sweep » sur [où].
Une nouvelle couleur de fond doit balayer l’élément depuis un bord, dépasser légèrement le bord opposé avec un rebond élastique puis se stabiliser, pendant que la couleur du texte change pour rester lisible ; quand le pointeur sort, elle ressort en glissant en douceur.
Garde le texte au-dessus du remplissage et applique 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.

Au survol, le fond s’ouvre ou se ferme comme des volets, depuis le centre ou depuis les bords.

Ajoute un effet au survol « Shutter Fill » (aussi appelé shutter) sur [où].
La nouvelle couleur de fond doit s’ouvrir depuis une ligne verticale au centre vers les deux côtés, comme des volets, puis se refermer vers le centre quand le pointeur sort, tandis que la couleur du texte change pour rester lisible : fluide et rapide.
Garde le remplissage rogné à l’intérieur de l’élément et le texte au-dessus, et applique le même effet au focus clavier.

Un calque glisse depuis le côté par lequel le pointeur est entré et repart vers le côté par lequel il sort.

Ajoute un effet « Direction Aware Hover » (aussi appelé direction-aware overlay) sur [où].
Un calque doit glisser depuis le côté par lequel le pointeur est entré et repartir vers le côté par lequel il sort : rapide et fluide.
Détermine le côté à partir de la position du pointeur à l’entrée et à la sortie et, au toucher ou au focus clavier, utilise une direction par défaut.

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

La couleur de la bordure apparaît ou change en fondu au survol.

Ajoute un effet au survol « Border Fade » sur [où].
La bordure doit passer en fondu d’une teinte discrète à la couleur d’accent tant que le pointeur survole l’élément : subtil, sans mouvement ni changement de taille.
Garde la même épaisseur de bordure dans les deux états pour que rien ne bouge et applique le même effet au focus clavier.

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.