Bar Chart Race (長條圖競賽)
別稱 Racing Bar Chart
隨著數值變化，水平長條的排名隨時間不斷交換。
適用情境
時間序列資料敘事
變體
- ranked with labels
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「長條圖競賽」(Bar Chart Race)，也叫 racing bar chart。
水平長條隨數值隨時間變化而伸縮，每當排名改變時平順地彼此超越，每根長條都帶著自己的標籤。
用 transform 移動長條，而不是重新排列標記結構，讓交換過程是滑動而不是跳動；並提供使用者暫停的方式。相似的動效
Bar Chart Grow (長條圖成長)
別稱 Animated Bar Chart, Bar Chart Entrance
長條從零高度升到各自的資料值。
適用情境
儀表板和報表
在[套用位置]加入「長條圖成長」(Bar Chart Grow) 動畫，也叫 animated bar chart 或 bar chart entrance。
各根長條以快速的錯開節奏依序從基線升到各自的數值，落定時平順減速。
圖表進入畫面時只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示完成後的圖表。Chart Data Transition (圖表資料轉場)
別稱 Chart Update Animation
資料變化或切換資料集時，圖表元素從舊值平順過渡到新值。
適用情境
即時儀表板
在[套用位置]加入「圖表資料轉場」(Chart Data Transition)，也叫 chart update animation。
資料變化時，所有長條同時從舊值平順、從容地過渡到新值，而不是從零重新繪製。
每次更新都從畫面上目前的數值開始，這樣快速接連的第二次變化也不會跳動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就立即套用新數值。- A
- B
- C
- D
- E
- F
點擊試試
FLIP Layout Animation (FLIP 版面動畫)
別稱 Layout animation, First-Last-Invert-Play
版面變動後，元素平順地移動到新的位置和尺寸。
適用情境
篩選網格、重新排列的清單
在[套用位置]加入「FLIP 版面動畫」(FLIP Layout Animation)，也叫版面動畫 (layout animation) 或 First-Last-Invert-Play。
版面變動時，每個元素從舊位置平順移動到新位置，而不是直接跳過去：一開始快，最後輕柔地定位。
只用 transform 做動畫，避免頁面每一格都重新排版；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接切換到新版面。Data & Numbers 中的其他動效
Donut Chart Fill (環圈圖填充)
別稱 Pie Chart Sweep, Animated Donut Chart, Radial Chart Draw
環圈或圓餅圖依順時針方向填滿到對應的百分比。
適用情境
占比構成展示
在[套用位置]加入「環圈圖填充」(Donut Chart Fill) 動畫，也叫 pie chart sweep 或 animated donut chart。
從頂端開始，各段依序順時針掃出，直到環圈顯示出各自的占比，結束時平順減速。
圖表進入畫面時只播放一次，並以文字形式提供實際數值給螢幕閱讀器。- %
Number Ticker (數字遞增)
別稱 Count Up, Animated Counter, Number Counter, countUp
數字出現在畫面上時，從起始值計數到目標值。
適用情境
統計數據、KPI 區塊
在[套用位置]加入「數字遞增」(Number Ticker)，也叫 count up 或 animated counter。
數字進入畫面時，從零計數到目標值，一開始快，接近終點時柔和地放慢。
使用等寬數字，避免周圍內容抖動；只計數一次；對螢幕閱讀器以及開啟了「減少動態效果」(prefers-reduced-motion) 的使用者，直接顯示最終數值。