Swing
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.
Usages
Panneaux suspendus, icônes de notification
Prompt
Remplacez [où] par la partie de votre page, puis collez le prompt dans votre agent IA. Chaque prompt contient le nom de l’animation : la prochaine fois, il vous suffira de la demander par son nom.
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.Animations similaires
A
L’élément oscille de gauche à droite en s’inclinant, comme un objet instable.
Usages
Attirer l’attention sur des icônes ou des boutons
Ajoute un effet d’attention « Wobble » sur [où].
L’élément doit osciller de gauche à droite en s’inclinant, avec un grand balancement au départ qui diminue à chaque aller-retour jusqu’à s’immobiliser.
Joue-le une fois au déclenchement et empêche le contenu voisin de se décaler.A
Head Shake
Aussi appelée Headshake, No Shake
L’élément oscille de gauche à droite avec une légère rotation, comme une tête qui fait non.
Usages
Saisies invalides ou refus
Ajoute un effet d’attention « Head Shake » (aussi appelé headshake ou no shake) sur [où].
L’élément doit pivoter rapidement de gauche à droite avec une légère torsion, comme une tête qui fait non, chaque mouvement plus petit que le précédent jusqu’à s’immobiliser.
Joue-le une fois à chaque déclenchement, par exemple lors d’une action refusée, et empêche la mise en page autour de bouger.A
L’élément pivote sur une charnière en haut à gauche, se balance, puis tombe hors de l’écran.
Usages
Suppression d’un élément façon cartoon
Ajoute une animation de sortie « Hinge » sur [où].
L’élément doit basculer depuis son coin supérieur gauche comme si une vis s’était desserrée, se balancer d’avant en arrière, puis tomber hors de l’écran en disparaissant en fondu : lent, comique et délibéré.
Laisse-le tomber par-dessus le reste du contenu sans pousser la mise en page ni ajouter de barres de défilement, retire-le une fois tombé, et masque-le immédiatement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).A
Survolez la démo
L’élément pivote de quelques degrés au survol.
Usages
Icônes, miniatures
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.Autres animations : Emphasis
A
L’élément grossit, se trémousse en pivotant puis reprend sa taille, comme pour célébrer.
Usages
États de réussite, célébrations
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).Vibrate
Aussi appelée Vibration, Buzz
L’élément tremble très vite par de petites secousses dans plusieurs directions, comme un téléphone qui vibre.
Usages
Alertes, signaux façon appel entrant
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.