Chart Data Transition

Balken wachsen von der Höhe null bis zu ihren Datenwerten.

Füge bei [wo] eine „Bar Chart Grow“-Animation hinzu (auch animated bar chart oder bar chart entrance genannt).
Jeder Balken soll nacheinander in schneller Staffelung von der Grundlinie auf seinen Wert wachsen und beim Ankommen weich abbremsen.
Spiele sie einmal ab, wenn das Diagramm ins Bild kommt, und zeige bei reduzierter Bewegung (prefers-reduced-motion) sofort das fertige Diagramm.

Horizontale Balken tauschen im Zeitverlauf ihre Ränge, während sich die Werte ändern.

Füge bei [wo] ein „Bar Chart Race“ hinzu (auch racing bar chart genannt).
Horizontale Balken sollen wachsen und schrumpfen, während sich die Werte über die Zeit ändern, und bei jedem Rangwechsel weich aneinander vorbeigleiten, jeder mit seinem Label.
Bewege die Balken mit Transforms statt das Markup umzusortieren, damit Wechsel gleiten statt springen, und gib Nutzern eine Möglichkeit, es zu pausieren.

Ein Ring oder Kreisdiagramm füllt sich im Uhrzeigersinn bis zu seinem Prozentwert.

Füge bei [wo] eine „Donut Chart Fill“-Animation hinzu (auch pie chart sweep oder animated donut chart genannt).
Oben beginnend soll jedes Segment nacheinander im Uhrzeigersinn aufziehen, bis der Ring seinen Anteil zeigt, und am Ende weich abbremsen.
Spiele sie einmal ab, wenn das Diagramm ins Bild kommt, und stelle die tatsächlichen Werte für Screenreader als Text bereit.

Senkrechte Balken wachsen und schrumpfen phasenversetzt, wie ein Audio-Equalizer.

Füge bei [wo] eine „Bar Loader (Equalizer)“-Ladeanimation hinzu (auch Bars Loader oder Audio Bars genannt).
Ein paar senkrechte Balken sollen sich phasenversetzt strecken und stauchen wie ein Audio-Equalizer, in lebhaftem, aber gleichmäßigem Tempo.
Halte die Schleife nahtlos, gib ihr ein Status-Label für Screenreader und stoppe die Bewegung bei reduzierter Bewegung (prefers-reduced-motion).

Eine Zahl zählt von einem Start- zu einem Zielwert hoch, sobald sie sichtbar wird.

Füge bei [wo] einen „Number Ticker“ hinzu (auch count up oder animated counter genannt).
Sobald die Zahl ins Bild kommt, soll sie von null bis zu ihrem Zielwert hochzählen, anfangs schnell und zum Ende hin sanft abbremsend.
Nutze Ziffern mit fester Breite, damit drumherum nichts zittert, zähle nur einmal und zeige Screenreadern sowie bei reduzierter Bewegung (prefers-reduced-motion) sofort den Endwert.

Bei jeder Zahlenänderung rollt jede Ziffer vertikal zum neuen Wert.

Füge bei [wo] eine „Odometer“-Zahlenanimation hinzu (auch rolling numbers oder slot-machine digits genannt).
Ändert sich der Wert, soll jede Ziffer vertikal zu ihrer neuen Ziffer rollen, immer vorwärts, mit leichter Staffelung zwischen den Ziffern und einem kleinen Einrasten am Ende.
Halte alle Ziffern gleich breit, damit sich die Zahl nicht verschiebt, und gib Screenreadern nur den Endwert aus.