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)的用户，直接给出最终数值。