纯css无法实现数字递增滚动动画，因counter-increment离散触发且@keyframes不能插值；唯一纯css方案是@property（仅chromium支持），但实际推荐js驱动数值+css处理位移过渡。
纯 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 - 只能用于
<number></number>类型（不能是<integer></integer>，否则 Safari 直接忽略） - 动画目标值必须是合法数字，比如
100，不能是"100"
示例（仅现代 Chromium）：
@property --num {
syntax: '<number>';
inherits: false;
initial-value: 0;
}
<p>.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);
}
</p></number>
然后 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 批量更新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
