Radial Fill

La nouvelle vue se révèle dans un cercle qui s’agrandit depuis le point du clic.

Ajoute une transition « Circular Reveal » (aussi appelée clip-path circle expand ou theme toggle reveal) sur [où].
La nouvelle vue doit apparaître dans un cercle qui grandit depuis la commande pressée jusqu’à couvrir toute la zone : fluide et régulier, avec une accélération et une décélération douces.
Fais partir le cercle exactement de l’endroit où la commande a été pressée, et bascule instantanément sans cercle si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une onde circulaire s’étend et s’estompe depuis le point exact du clic ou du toucher.

Ajoute un effet « Ripple » (aussi appelé material ripple ou ink ripple) sur [où].
À chaque clic ou toucher, une onde circulaire douce doit se propager depuis le point exact de l’appui jusqu’à couvrir l’élément, en s’estompant à mesure qu’elle grandit : rapide et légère.
Rogne l’onde à la forme de l’élément, laisse chaque appui rapide lancer sa propre onde, et fais-la partir du centre pour les appuis au 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.

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.