Spin

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.

Un anneau ou un arc tourne en continu pour indiquer qu’un chargement est en cours.

Ajoute un « Circular Spinner » (aussi appelé spinner ou throbber) sur [où].
Un arc doit tourner régulièrement autour d’un anneau pâle en s’allongeant et en se raccourcissant, de façon fluide et continue.
Garde une rotation sans coupure, donne-lui un libellé de chargement pour les lecteurs d’écran et ralentis-le ou arrête-le si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

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.

Le texte est disposé autour d’un cercle qui tourne en continu.

Ajoute « Spinning Text » (aussi appelé circular text ou text on circle) sur [où].
Les lettres doivent être réparties uniformément autour d’un cercle qui tourne lentement et régulièrement, sans saut quand la boucle recommence.
Donne le texte une seule fois aux lecteurs d’écran comme du texte normal, et arrête la rotation si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément se balance d’un côté à l’autre depuis son bord supérieur, comme un pendule dont l’amplitude décroît.

Ajoute un effet d’attention « Swing » sur [où].
L’élément doit se balancer d’un côté à l’autre comme une enseigne suspendue, avec un grand mouvement au départ qui s’amortit vite.
Fais-le pivoter depuis son bord supérieur plutôt que depuis son centre, et joue-le une fois au déclenchement.

L’élément grossit, se trémousse en pivotant puis reprend sa taille, comme pour célébrer.

Ajoute un effet d’attention « Tada » sur [où].
L’élément doit rapetisser légèrement, puis grandir et se trémousser de gauche à droite avec une inclinaison rapide avant de reprendre sa taille normale, comme une petite célébration.
Joue-le une fois, par exemple juste après une réussite, et supprime-le si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément tremble très vite par de petites secousses dans plusieurs directions, comme un téléphone qui vibre.

Ajoute un effet d’attention « Vibrate » (aussi appelé buzz ou vibration) sur [où].
L’élément doit trembler par de minuscules secousses rapides dans différentes directions pendant un bref instant, comme un téléphone qui vibre, puis s’immobiliser.
Garde un mouvement très faible pour que le contenu reste lisible, et joue-le une fois par alerte plutôt qu’en boucle.