Round Corners

Une forme vectorielle se transforme en douceur en une autre.

Ajoute un « Shape Morph » (aussi appelé path morphing ou SVG morph) sur [où].
Une forme doit se transformer en douceur en une autre, par exemple un pentagone qui se resserre en étoile, ses points glissant à leur place à un rythme régulier et posé.
Donne aux deux formes le même nombre de points correspondants pour que la transformation reste nette et sans scintillement, et joue-la une fois par changement d’état plutôt qu’en boucle.

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.