Odometer (数字滚轮)
别称 Rolling Numbers, Animated Number, AnimateNumber, Slot-Machine Digits
数字变化时，每一位都纵向滚动到新的值。
适用场景
实时计数器、价格
变体
- digit roll
- slide with fade
- themed odometer
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“数字滚轮”(Odometer)数字动画，也叫 rolling numbers 或老虎机数字(slot-machine digits)。
数值变化时，每一位都纵向滚动到新的数字，始终向前滚动，各位之间略有错开，结尾有轻微的回稳。
让每一位数字宽度相同，避免整个数字位移；只向屏幕阅读器提供最终数值。相似的动效
- %
Number Ticker (数字递增)
别称 Count Up, Animated Counter, Number Counter, countUp
数字进入可见区域时，从起始值计数到目标值。
适用场景
统计数据、KPI 模块
在[应用位置]添加“数字递增”(Number Ticker)，也叫 count up 或 animated counter。
数字进入视口时，从零计数到目标值，开始时快，接近终点时柔和地放慢。
使用等宽数字，避免周围内容抖动；只计数一次；对屏幕阅读器以及开启了“减少动态效果”(prefers-reduced-motion)的用户，直接给出最终数值。H
G
F
E
D
C
BK
J
I
H
G
F
EN
M
L
K
J
I
HQ
P
O
N
M
L
KT
S
R
Q
P
O
N
Split-Flap Text (翻牌文字)
别称 Text Flipping Board, Flip Board, Vestaboard display
字符像机场航班显示牌一样翻动，直到停在目标字母上。
适用场景
状态看板、复古显示屏
在[应用位置]添加“翻牌文字”(Split-Flap Text)效果，也叫翻牌板(text flipping board 或 flip board)。
每个字符格快速翻过字母表，直到停在目标字母上，各字符格从左到右依次停稳。
每次文字出现或变化时运行一次，只向屏幕阅读器播报最终文字；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就不翻动，直接显示最终文字。ABDEFGHIJKLDEFMN
Word Rotate (词语轮播)
别称 Rotating Words, Flip Words, Container Text Flip, Layout Text Flip, Rotating Text Wheel
句子中的一个词以滑动、翻转或淡入淡出的方式换成列表中的下一个词。
适用场景
首屏标语
在[应用位置]添加“词语轮播”(Word Rotate)效果，也叫轮换词(rotating words)或翻转词(flip words)。
行内的一个词向上滑出，列表中的下一个词从下方滑入，每个词停留片刻后再切换。
词宽不同时不要让这一行的其余部分跳动，不要让屏幕阅读器播报每次切换；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止轮播。Data & Numbers 中的其他动效
Animated Map Arcs (地图飞线)
别称 World Map Animated Lines, Globe Arcs
线条和圆点在地图或地球上的各个地点之间动态移动。
适用场景
展示全球覆盖的视觉
在[应用位置]添加“地图飞线”(Animated Map Arcs)，也叫 globe arcs。
曲线在点阵地图的各地点之间依次画出，随后向目的地收回，同时目的地处有一圈柔和的光环脉动：平静而稳定。
让各条弧线错开时间，绝不同步移动；循环要无缝；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则暂停播放。Bar Chart Grow (柱状图生长)
别称 Animated Bar Chart, Bar Chart Entrance
柱子从零高度升至各自的数据值。
适用场景
仪表盘和报表
在[应用位置]添加“柱状图生长”(Bar Chart Grow)动画，也叫 animated bar chart 或 bar chart entrance。
各根柱子以快速的错开节奏依次从基线升到各自的数值，落定时平滑减速。
图表进入视口时只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示完成后的图表。A
B
C
D
Bar Chart Race (动态排序条形图)
别称 Racing Bar Chart
随着数值变化，水平条形的排名随时间不断交换。
适用场景
时间序列数据叙事
在[应用位置]添加“动态排序条形图”(Bar Chart Race)，也叫 racing bar chart。
水平条形随数值随时间变化而伸缩，每当排名变化时平滑地彼此超越，每根条形都带着自己的标签。
用 transform 移动条形，而不是重新排列标记结构，让交换过程是滑动而不是跳变；并为用户提供暂停的方式。