Bar Chart Race (gráfico de carrera de barras)

Las barras suben desde altura cero hasta sus valores.

Añade un gráfico de barras animado (Bar Chart Grow) en [dónde], también llamado animated bar chart o bar chart entrance.
Cada barra debe subir desde la línea base hasta su valor una tras otra con un escalonado rápido, desacelerando con suavidad al asentarse.
Reprodúcelo una sola vez cuando el gráfico entre en pantalla y muestra el gráfico terminado de inmediato si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Los elementos del gráfico pasan con suavidad de los valores antiguos a los nuevos cuando cambian los datos o se alterna el conjunto de datos.

Añade un "Chart Data Transition" (también llamado chart update animation) en [dónde].
Cuando cambien los datos, todas las barras deben deslizarse a la vez de su valor anterior al nuevo, de forma suave y sin prisa, en lugar de redibujarse desde cero.
Empieza cada actualización desde los valores que hay en pantalla para que un segundo cambio rápido no salte, y aplica los valores nuevos al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Los elementos se deslizan con suavidad a sus nuevas posiciones y tamaños después de un cambio de diseño.

Añade una "FLIP Layout Animation" (también llamada layout animation o First-Last-Invert-Play) en [dónde].
Cuando cambie el diseño, cada elemento debe deslizarse de su posición anterior a la nueva en lugar de saltar, rápido al principio y asentándose con suavidad.
Anima solo con transforms para que la página no recalcule el diseño en cada fotograma, y pasa directamente al nuevo diseño si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Un anillo o un gráfico circular se rellena en sentido horario hasta su porcentaje.

Añade una animación "Donut Chart Fill" (también llamada pie chart sweep o animated donut chart) en [dónde].
Empezando por arriba, cada segmento debe barrer en sentido horario por turnos hasta que el anillo muestre su proporción, desacelerando con suavidad al terminar.
Reprodúcela una sola vez cuando el gráfico entre en pantalla y deja los valores reales disponibles como texto para los lectores de pantalla.

Un número cuenta desde un valor inicial hasta un valor objetivo cuando se vuelve visible.

Añade un contador animado (Number Ticker) en [dónde], también llamado count up o animated counter.
Cuando el número entre en pantalla, debe contar desde cero hasta su objetivo, rápido al principio y frenando con suavidad al llegar.
Usa dígitos de ancho fijo para que nada alrededor tiemble, cuenta una sola vez y da el valor final de inmediato a los lectores de pantalla y si el usuario prefiere movimiento reducido (prefers-reduced-motion).