CSS数字递增效果实现方法

纯CSS无法真正实现平滑的数字递增滚动动画，因为counter-increment仅支持离散计数、@keyframes无法对计数器进行插值，而唯一能触发数值过渡的@property方案又受限于极差的浏览器兼容性（仅Chromium最新版支持，Safari和Firefox完全不支持）；因此，实际开发中更可靠且兼容性极佳的方案是“JS驱动逻辑+CSS处理位移”——用JavaScript精准控制每位数字的目标状态并切换预设的位移类，配合CSS transition实现流畅滚动效果，同时规避calc()中变量参与transform等兼容陷阱，兼顾性能、可维护性与全平台支持。

纯 CSS 无法真正“递增”数字，counter-increment 不支持动画中间态，@property 是目前唯一能触发数值过渡的方案，但仅 Chrome 108+、Edge 109+ 支持，Safari / Firefox 完全不支持。

为什么 counter-increment + @keyframes 做不了递增动画

很多人试过这样写：

@counter-style roll { system: cyclic; symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; }
.number { counter-reset: digit 0; }
.number::before { content: counter(digit); animation: inc 2s steps(10); }
@keyframes inc { from { counter-increment: digit 0; } to { counter-increment: digit 10; } }

结果发现数字只闪一下就跳到 10，没有滚动过程。原因很直接：

• counter-increment 是离散触发的，浏览器不会为中间值（比如 3.5）生成内容
• @keyframes 里不能用 counter() 做插值，它只在渲染时求值，不是响应式变量
• 所谓“steps(10)”只是把动画切成 10 段，但每段显示的仍是整数 counter 值，没有位移逻辑

@property 是唯一可行的纯 CSS 递增路径

它让 CSS 自定义属性变成可动画的类型，配合 transition 或 @keyframes 才能产生平滑变化。但有硬性前提：

• 必须声明 inherits: false 和 initial-value
• 只能用于 类型（不能是 ，否则 Safari 直接忽略）
• 动画目标值必须是合法数字，比如 100，不能是 "100"

示例（仅现代 Chromium）：

@property --num {
  syntax: '';
  inherits: false;
  initial-value: 0;
}
.digit {
font-family: monospace;
font-size: 48px;
height: 48px;
overflow: hidden;
line-height: 1;
}
.digit span {
display: block;
transform: translateY(calc(var(--num) * -48px));
transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

然后 JS 只需一句：el.style.setProperty('--num', 72)，CSS 就会自动补间位移。

实际项目中更推荐“CSS 负责位移，JS 负责驱动”的分工

因为 @property 兼容性太差，而用户真正要的是“数字看起来在滚”，不是“非得不用 JS”。此时应：

• 每位数字仍用 0–9 垂直堆叠 + overflow: hidden + 等宽字体
• CSS 只定义好 .n-0 到 .n-9 这 10 个位移类，每个写死 transform: translateY(-Xpx)
• JS 根据当前值和目标值，逐位计算差值，切换对应 class，并加 transition
• 避免用 calc(var(--n) * -48px) —— 多数浏览器不支持 calc 中嵌套变量参与 transform

这个模式在 Vue/React 里封装成组件极轻量，且 iOS Safari、旧版 Android WebView 全兼容。

真正容易被忽略的点是：多位数联动时，如果 JS 同步更新所有位的 class，但各元素的 transition 时间稍有差异（比如受 layout 触发时机影响），就会出现错帧——某位先滚、某位后滚，看起来像卡顿。解决办法是统一用 getComputedStyle 读取当前 transform 值做起点，或强制用 requestAnimationFrame 批量更新。

今天关于《CSS数字递增效果实现方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！