7 animationsRemplacez [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.
Des lignes et des points s’animent entre des lieux sur une carte ou un globe.
Usages
Visuels de présence internationale
Ajoute des « Animated Map Arcs » (aussi appelés globe arcs) sur [où].
Des lignes courbes doivent se dessiner l’une après l’autre entre des lieux sur une carte en points, puis se rétracter vers leur destination pendant qu’un anneau doux y pulse : calme et régulier.
Décale les arcs pour qu’ils ne bougent jamais en même temps, garde la boucle continue et mets-la en pause si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).
Aussi appeléeAnimated Bar Chart, Bar Chart Entrance
Les barres montent d’une hauteur nulle jusqu’à leurs valeurs.
Usages
Tableaux de bord et rapports
Ajoute une animation « Bar Chart Grow » (aussi appelée animated bar chart ou bar chart entrance) sur [où].
Chaque barre doit monter de la ligne de base jusqu’à sa valeur, l’une après l’autre avec un décalage rapide, en ralentissant en douceur à l’arrivée.
Joue-la une seule fois quand le graphique entre à l’écran, et affiche directement le graphique final si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).
Des barres horizontales échangent leur rang au fil du temps à mesure que les valeurs changent.
Usages
Récits à partir de séries temporelles
Ajoute un « Bar Chart Race » (aussi appelé racing bar chart) sur [où].
Les barres horizontales doivent grandir et rétrécir à mesure que les valeurs évoluent dans le temps, et glisser en douceur les unes devant les autres à chaque changement de rang, chacune gardant son libellé.
Déplace les barres avec des transformations plutôt qu’en réordonnant le balisage pour que les échanges glissent au lieu de sauter, et donne aux utilisateurs un moyen de le mettre en pause.
Les éléments du graphique passent en douceur des anciennes aux nouvelles valeurs quand les données changent ou qu’on bascule de jeu de données.
Usages
Tableaux de bord en temps réel
Ajoute une « Chart Data Transition » (aussi appelée chart update animation) sur [où].
Quand les données changent, toutes les barres doivent glisser en même temps de leur ancienne valeur à la nouvelle, en douceur et sans hâte, au lieu d’être redessinées depuis zéro.
Fais partir chaque mise à jour des valeurs actuellement affichées pour qu’un second changement rapide ne saute pas, et applique les nouvelles valeurs instantanément si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).
Aussi appeléePie Chart Sweep, Animated Donut Chart, Radial Chart Draw
Un anneau ou un camembert se remplit dans le sens horaire jusqu’à son pourcentage.
Usages
Répartitions en parts
Ajoute une animation « Donut Chart Fill » (aussi appelée pie chart sweep ou animated donut chart) sur [où].
En partant du haut, chaque segment doit se déployer à tour de rôle dans le sens horaire jusqu’à ce que l’anneau affiche sa part, en ralentissant en douceur à la fin.
Joue-la une seule fois quand le graphique entre à l’écran, et garde les vraies valeurs disponibles en texte pour les lecteurs d’écran.
Aussi appeléeCount Up, Animated Counter, Number Counter, countUp
Un nombre défile d’une valeur de départ jusqu’à une valeur cible quand il devient visible.
Usages
Statistiques et blocs de KPI
Ajoute un compteur animé (Number Ticker) sur [où] : aussi appelé count up ou animated counter.
Quand le nombre entre à l’écran, il doit compter de zéro jusqu’à sa cible, vite au début puis en ralentissant doucement à l’arrivée.
Utilise des chiffres à chasse fixe pour que rien ne tremble autour, compte une seule fois, et donne directement la valeur finale aux lecteurs d’écran et si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).
Aussi appeléeRolling Numbers, Animated Number, AnimateNumber, Slot-Machine Digits
Chaque chiffre défile verticalement jusqu’à la nouvelle valeur quand un nombre change.
Usages
Compteurs en direct et prix
Ajoute une animation de nombres « Odometer » (aussi appelée rolling numbers ou slot-machine digits) sur [où].
Quand la valeur change, chaque chiffre doit rouler verticalement jusqu’à son nouveau chiffre, toujours vers l’avant, avec un léger décalage entre les chiffres et un petit calage à la fin.
Garde tous les chiffres de même largeur pour que le nombre ne bouge pas, et n’expose que la valeur finale aux lecteurs d’écran.