Bar Chart Race

Les barres montent d’une hauteur nulle jusqu’à leurs valeurs.

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).

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.

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).

Après un changement de mise en page, les éléments glissent en douceur vers leurs nouvelles positions et tailles.

Ajoute une « FLIP Layout Animation » (aussi appelée layout animation ou First-Last-Invert-Play) sur [où].
Quand la mise en page change, chaque élément doit glisser de son ancienne position vers la nouvelle au lieu de sauter, vite au début puis en se posant en douceur.
Anime uniquement avec des transforms pour que la page ne recalcule pas sa mise en page à chaque image, et passe directement à la nouvelle mise en page si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un anneau ou un camembert se remplit dans le sens horaire jusqu’à son pourcentage.

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.

Un nombre défile d’une valeur de départ jusqu’à une valeur cible quand il devient visible.

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).