Hover

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.

La couleur du fond et celle du texte passent en fondu vers une nouvelle couleur au survol.

Ajoute un effet au survol « Background Fade » (aussi appelé color fade) sur [où].
Les couleurs du fond et du texte doivent passer en fondu vers de nouvelles couleurs tant que le pointeur survole l’élément, puis revenir quand il sort : calme, sans mouvement.
Garde un contraste suffisant entre texte et fond dans les deux états et applique le même effet au focus clavier.

Un fond coloré balaie l’élément depuis un bord au survol.

Ajoute un effet au survol « Background Sweep » (aussi appelé background fill ou slide fill) sur [où].
Une nouvelle couleur de fond doit balayer l’élément du bord gauche vers le bord droit, de façon fluide et rapide, sans rebond, puis se retirer de la même manière quand le pointeur sort, pendant que la couleur du texte change pour rester lisible.
Garde le remplissage découpé dans la forme de l’élément et applique le même effet au focus clavier.

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.

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.

Un fond de surbrillance glisse d’une carte à l’autre dans une grille pour suivre celle qui est survolée.

Ajoute un « Card Hover Effect » (aussi appelé sliding highlight card grid) sur [où].
Un fond de surbrillance doux doit apparaître derrière la carte survolée et glisser en douceur vers la carte suivante que vise le pointeur, puis disparaître en fondu quand le pointeur quitte la grille.
Fais en sorte que le focus clavier déplace la surbrillance de la même façon et que les cartes elles-mêmes ne bougent pas.

Une douce lumière radiale suit le pointeur sur la surface de la carte et révèle le fond en dessous.

Ajoute un effet « Card Spotlight » (aussi appelé spotlight hover, pointer glow, mouse-following glow ou radial gradient hover) sur [où].
Une lueur radiale douce et légère doit suivre le pointeur sur la surface de la carte, apparaître en fondu quand il entre et s’estomper quand il sort.
Garde la lueur derrière le contenu de la carte pour que le texte reste lisible et, sur les appareils tactiles, laisse simplement la carte sans éclairage.

Un coin de l’élément se replie comme une page qu’on tourne au survol.

Ajoute un effet au survol « Curl » (aussi appelé page curl) sur [où].
Un coin de l’élément doit se replier en douceur comme une page qu’on tourne, en montrant le revers du pli, puis redevenir plat quand le pointeur sort.
Garde le pli petit pour qu’il ne cache pas de contenu important 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.

Les icônes d’une rangée grossissent en douceur à l’approche du pointeur, comme le Dock de macOS.

Ajoute un effet « Dock Magnification » (aussi appelé dock) sur [où].
Les icônes de la rangée doivent grossir en douceur à mesure que le pointeur s’approche, la plus proche étant la plus grande et ses voisines légèrement agrandies, puis toutes reprendre leur taille normale quand le pointeur s’en va.
Fais grossir les icônes vers le haut à partir d’une ligne de base fixe et garde chaque icône utilisable à sa taille normale au toucher et au clavier.

L’élément s’élève de quelques pixels au survol, comme s’il flottait.

Ajoute un effet au survol « Float » (aussi appelé lift ou raise) sur [où].
L’élément doit s’élever un peu et rester surélevé tant que le pointeur est dessus, puis redescendre quand il sort : fluide et doux, sans rebond.
Déplace-le seulement visuellement sans décaler la mise en page autour et applique le même effet au focus clavier.

Les cartes voisines deviennent floues et s’assombrissent tandis que la carte survolée reste nette.

Ajoute un effet « Focus Cards » (aussi appelé blur siblings on hover, hover focus blur ou card hover effect) sur [où].
Tant que le pointeur survole une carte, les autres doivent devenir floues, s’assombrir et rétrécir légèrement tandis que la carte survolée reste nette, le tout avec un fondu doux qui s’inverse quand le pointeur sort.
Applique la même mise en avant au focus clavier et garde toutes les cartes nettes et lisibles quand rien n’est survolé.

Un halo lumineux coloré apparaît autour de l’élément au survol.

Ajoute un effet au survol « Glow » (aussi appelé neon glow) sur [où].
Un halo coloré doux doit apparaître en fondu autour de l’élément tant que le pointeur est dessus, puis s’estomper quand il sort : doux, sans mouvement.
Fais en sorte que le halo n’affecte pas la mise en page 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.

Au survol, le fond plein se vide et ne laisse qu’un bouton à contour.

Ajoute un effet de survol « Hollow » (aussi appelé ghost fill) sur [où].
Le fond plein doit disparaître en fondu pour ne laisser que le contour, et la couleur du libellé doit changer pour rester lisible sur le fond vide : fluide et rapide.
Garde la même épaisseur de bordure dans les deux états pour que l’élément ne change pas de taille, et affiche le même effet au focus clavier.

Une bordure en dégradé s’anime autour de l’élément et s’étend quand le pointeur le survole.

Ajoute un effet « Hover Border Gradient » sur [où].
Un court reflet en dégradé doit reposer sur une partie de la bordure ; tant que le pointeur survole l’élément, il doit faire le tour de la bordure à vitesse régulière pendant que toute la bordure s’illumine d’une lueur douce.
N’anime la bordure qu’au survol et garde-la immobile si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Au survol, une ombre douce apparaît ou s’accentue sous l’élément pour suggérer qu’il s’élève.

Ajoute une ombre au survol (Hover Shadow) sur [où], aussi appelée drop shadow on hover ou elevation on hover.
Une ombre douce sous l’élément doit s’accentuer et s’étaler tant que le pointeur le survole pour qu’il paraisse surélevé, puis s’estomper quand il le quitte, sans que l’élément lui-même bouge.
Garde l’ombre assez discrète pour fonctionner en thème clair comme en thème sombre, et affiche le même effet au focus clavier.

Une couche translucide teinte l’élément pour indiquer que le pointeur le survole.

Ajoute un « Hover State Layer » (aussi appelé hover state, state layer ou hover overlay) sur [où].
Une couche translucide et légère dans la couleur du contenu doit apparaître rapidement en fondu sur l’élément tant que le pointeur le survole, puis disparaître quand il le quitte.
Garde-la légère pour préserver le contraste, et utilise le même principe de couche pour les états focus et pressé.

Au survol, une icône tombe hors du champ et revient par le haut.

Ajoute un effet de survol « Icon Drop » sur [où].
L’icône dans l’élément doit tomber vers le bas jusqu’à disparaître, puis revenir à sa place par le haut : rapide, avec un atterrissage en douceur.
Joue-le une fois à chaque entrée du pointeur plutôt qu’en boucle, et ne change ni le libellé ni la taille du bouton.

Une icône s’échappe du bouton en flottant et s’efface pendant qu’une nouvelle arrive.

Ajoute un effet de survol « Icon Float Away » sur [où].
L’icône actuelle doit s’élever en flottant et s’effacer pendant qu’une nouvelle icône monte d’en bas pour prendre sa place, en douceur, et l’échange doit s’inverser quand le pointeur sort.
Garde la taille du bouton fixe pendant l’échange, et affiche le même effet au focus clavier.

Une icône à l’intérieur d’un bouton tourne sur elle-même au survol du bouton.

Ajoute un effet de survol « Icon Spin » sur [où].
L’icône dans l’élément doit faire un tour complet en douceur quand le pointeur entre, puis revenir en tournant quand il sort.
Fais tourner uniquement l’icône, pas tout le bouton, et affiche le même effet au focus clavier.

Au survol, le libellé du bouton glisse vers l’extérieur tandis qu’une flèche et un remplissage s’étendent.

Ajoute un effet « Interactive Hover Button » sur [où].
Le petit point à côté du libellé doit s’agrandir jusqu’à remplir le bouton pendant que le libellé glisse sur le côté et s’efface, puis le libellé accompagné d’une flèche glisse par-dessus le nouveau remplissage : fluide et rapide.
Garde la taille du bouton fixe et le libellé lisible du début à la fin, et affiche le même effet au focus clavier.

Au survol, une flèche ou l’élément lui-même glisse de quelques pixels vers l’avant ou vers l’arrière.

Ajoute un effet de survol « Nudge Forward / Backward » (aussi appelé arrow nudge) sur [où].
La flèche doit glisser un peu dans la direction qu’elle indique tant que le pointeur survole l’élément, puis revenir quand il le quitte : rapide et léger.
Ne déplace que la flèche, sans décaler le libellé ni la mise en page, et affiche le même effet au focus clavier.

Au survol, un contour s’écarte de l’élément ou se resserre vers lui.

Ajoute un effet de survol « Outline Expand » sur [où].
Un contour doit partir collé au bord de l’élément et s’en écarter pour laisser un petit espace tout autour, rester ainsi pendant le survol et se refermer quand le pointeur sort : fluide et rapide.
Dessine le contour sans changer la taille de l’élément ni pousser le contenu voisin, et affiche le même effet au focus clavier.

Au survol, une ligne se déploie au-dessus du texte depuis la gauche, le centre ou la droite.

Ajoute un effet de survol « Overline Grow » sur [où].
Une ligne au-dessus du texte doit s’étendre du centre vers les deux côtés tant que le pointeur le survole, puis se rétracter vers le centre quand il sort : rapide et fluide.
Réserve de la place pour la ligne afin que le texte ne bouge pas, et affiche le même effet au focus clavier.

L’élément grossit rapidement puis revient à sa taille avec un petit rebond élastique.

Ajoute un effet de survol « Pop » sur [où].
À chaque entrée du pointeur, l’élément doit gonfler une fois rapidement puis revenir à sa taille normale, comme un petit rebond élastique.
Joue-le une fois par survol au lieu de garder la taille agrandie ou de boucler, et évite que la mise en page autour ne bouge.

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.

L’élément pivote de quelques degrés au survol.

Ajoute un effet de survol « Rotate » sur [où].
L’élément doit pivoter légèrement dans le sens des aiguilles d’une montre tant que le pointeur le survole, puis revenir quand il sort : fluide et discret.
Évite que la mise en page autour ne bouge, et affiche le même effet au focus clavier.

Les coins de l’élément s’arrondissent en douceur au survol.

Ajoute un effet au survol « Round Corners » sur [où].
Les angles vifs de l’élément doivent s’arrondir en douceur tant que le pointeur est dessus, puis redevenir nets quand il sort : doux et rapide.
Garde la taille de l’élément inchangée et applique le même effet au focus clavier.

Au survol, une bande de lumière diagonale balaie l’élément d’un côté à l’autre.

Ajoute un effet au survol « Shine Sweep » (aussi appelé sheen, shiny button, shine on hover, glint, shimmer ou shimmer button) sur [où].
Une douce bande de lumière diagonale doit balayer l’élément de gauche à droite, puis recommencer après une courte pause tant que le pointeur reste dessus.
Garde la bande rognée à l’intérieur de l’élément, arrête-la quand le pointeur sort et ne la joue pas si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément rétrécit légèrement et en douceur quand le pointeur le survole.

Ajoute un effet au survol « Shrink » (aussi appelé scale down) sur [où].
L’élément doit rétrécir 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.

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.

Au survol, l’élément descend de quelques pixels, comme s’il s’enfonçait dans la page.

Ajoute un effet au survol « Sink » sur [où].
L’élément doit descendre un peu et rester en place tant que le pointeur est dessus, comme s’il s’enfonçait dans la page, puis remonter quand il sort : fluide, sans rebond.
Déplace-le seulement visuellement sans décaler la mise en page autour, et applique le même effet au focus clavier.

L’élément s’incline de biais au survol.

Ajoute un effet au survol « Skew » sur [où].
L’élément doit s’incliner de biais jusqu’à une légère inclinaison tant que le pointeur est dessus, puis se redresser quand il sort : rapide et fluide.
Garde le texte lisible pendant l’inclinaison, évite que la mise en page autour ne bouge et applique le même effet au focus clavier.

Au survol, un petit triangle de bulle apparaît sur un côté de l’élément.

Ajoute un effet au survol « Speech Bubble » (aussi appelé bubble) sur [où].
Une petite pointe triangulaire doit glisser de derrière un côté de l’élément pour lui donner une forme de bulle, puis rentrer quand le pointeur sort : rapide et fluide.
Donne à la pointe la même couleur que l’élément pour qu’ils forment une seule forme, et applique le même effet au focus clavier.

Au survol, un filet intérieur apparaît juste à l’intérieur du bord de l’élément.

Ajoute un effet au survol « Trim » sur [où].
Un filet fin doit apparaître en fondu juste à l’intérieur du bord de l’élément tant que le pointeur est dessus, puis disparaître quand il sort : discret, sans mouvement.
Garde le filet à l’intérieur de l’élément pour que sa taille ne change pas, et applique le même effet au focus clavier.

Une ligne glisse depuis le bord inférieur ou supérieur jusqu’à sa place pour souligner ou surligner l’élément par le haut.

Ajoute un effet au survol « Underline Reveal » (aussi appelé overline reveal ou reveal) sur [où].
Une ligne pleine largeur doit remonter en glissant jusqu’à sa place depuis juste sous le bord inférieur tant que le pointeur est sur l’élément, puis redescendre hors de vue quand il sort : rapide et fluide.
Rogne la ligne au bord pour qu’elle apparaisse en glissant plutôt qu’en fondu ou en s’allongeant, et applique le même effet au focus clavier.

La carte se déplace et change légèrement d’échelle en réponse au mouvement du pointeur sur elle.

Ajoute un effet « Wobble Card » sur [où].
Quand le pointeur se déplace sur la carte, celle-ci doit glisser légèrement vers lui tandis que son contenu glisse légèrement dans l’autre sens avec un petit agrandissement, en suivant en douceur, puis tout revient en place quand le pointeur sort.
Garde le mouvement réduit, et désactive-le sur les appareils tactiles et si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).