Data & Numbers

線條和圓點在地圖或地球上的各個地點之間動態移動。

在[套用位置]加入「動態地圖弧線」(Animated Map Arcs)，也叫 globe arcs。
曲線在點狀地圖的各地點之間依序畫出，接著往目的地收回，同時目的地有一圈柔和的光環脈動：平靜而穩定。
讓各條弧線錯開時間，絕不同步移動；循環要無縫；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就暫停播放。

長條從零高度升到各自的資料值。

在[套用位置]加入「長條圖成長」(Bar Chart Grow) 動畫，也叫 animated bar chart 或 bar chart entrance。
各根長條以快速的錯開節奏依序從基線升到各自的數值，落定時平順減速。
圖表進入畫面時只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示完成後的圖表。

隨著數值變化，水平長條的排名隨時間不斷交換。

在[套用位置]加入「長條圖競賽」(Bar Chart Race)，也叫 racing bar chart。
水平長條隨數值隨時間變化而伸縮，每當排名改變時平順地彼此超越，每根長條都帶著自己的標籤。
用 transform 移動長條，而不是重新排列標記結構，讓交換過程是滑動而不是跳動；並提供使用者暫停的方式。

資料變化或切換資料集時，圖表元素從舊值平順過渡到新值。

在[套用位置]加入「圖表資料轉場」(Chart Data Transition)，也叫 chart update animation。
資料變化時，所有長條同時從舊值平順、從容地過渡到新值，而不是從零重新繪製。
每次更新都從畫面上目前的數值開始，這樣快速接連的第二次變化也不會跳動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就立即套用新數值。

環圈或圓餅圖依順時針方向填滿到對應的百分比。

在[套用位置]加入「環圈圖填充」(Donut Chart Fill) 動畫，也叫 pie chart sweep 或 animated donut chart。
從頂端開始，各段依序順時針掃出，直到環圈顯示出各自的占比，結束時平順減速。
圖表進入畫面時只播放一次，並以文字形式提供實際數值給螢幕閱讀器。

數字出現在畫面上時，從起始值計數到目標值。

在[套用位置]加入「數字遞增」(Number Ticker)，也叫 count up 或 animated counter。
數字進入畫面時，從零計數到目標值，一開始快，接近終點時柔和地放慢。
使用等寬數字，避免周圍內容抖動；只計數一次；對螢幕閱讀器以及開啟了「減少動態效果」(prefers-reduced-motion) 的使用者，直接顯示最終數值。

數字變化時，每一位都縱向捲動到新的值。

在[套用位置]加入「里程表數字」(Odometer) 數字動畫，也叫 rolling numbers 或拉霸數字 (slot-machine digits)。
數值變化時，每一位都縱向捲動到新的數字，一律往前捲動，各位之間稍微錯開，結尾有輕微的回穩。
讓每一位數字寬度相同，避免整個數字位移；只提供最終數值給螢幕閱讀器。