Shutter Fill

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.

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.

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.

Des panneaux pleins balaient l’écran pour couvrir l’ancienne page, puis se retirent pour révéler la nouvelle.

Ajoute une transition de page « Curtain / Panel Wipe » (aussi appelée page wipe ou staggered panels) sur [où].
Des panneaux pleins doivent balayer l’écran l’un après l’autre pour couvrir l’ancienne page, la page doit changer pendant qu’elle est entièrement couverte, puis les panneaux doivent continuer hors de vue pour révéler la nouvelle : franc et fluide.
N’affiche jamais la nouvelle page avant que les panneaux aient couvert l’ancienne, et utilise un simple fondu si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

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.