纯CSS无法实现数字递增滚动动画，因其不能动态计算数值或更新文本；必须用JavaScript控制数字变化节奏，并结合CSS过渡或transform实现视觉效果。
纯 CSS 无法实现真正的数字递增滚动动画（比如从 0 滚到 1234），因为 CSS 动画不能动态计算中间数值或触发 DOM 文本更新；必须用 JavaScript 控制数字变化节奏 + 配合 CSS 过渡或 transform 实现视觉滚动效果。
为什么直接用 animation + @keyframes 不行
CSS @keyframes 只能预设固定起止值，比如从 0% 的 transform: translateY(0) 到 100% 的 transform: translateY(-100px)，但数字本身（如“876”）是静态文本，不会自动拆解为“0→1→2→…→876”。强行用 CSS 动画改 content 或 innerText 会失败——CSS 不能驱动 JS 级别的文本变更。
常见错误现象：element.style.animation = 'countUp 2s' 却发现数字没变，只闪了一下，或者控制台报 InvalidStateError。
真正可行的路径是：JS 控制数值更新频率 + CSS 处理单次滚动位移的过渡效果。
用 requestAnimationFrame + 数字拆分实现平滑滚动
核心思路：把目标数字按位拆成数组（如 2048 → ['2','0','4','8']），每列独立滚动；每列用一个 <div class="digit-column"> 包裹所有可能数字（0–9），通过 <code>transform: translateY() 移动对应位置，JS 控制移动偏移量。
实操建议：
- 每个数字列高度固定（如
2em），内部数字容器高度 =10 * 2em，这样 0 在顶部、9 在底部 - 用
requestAnimationFrame替代setInterval，避免帧率抖动和跳帧 - 计算当前应显示的数字时，用
Math.floor(currentValue / Math.pow(10, i)) % 10取第 i 位，避免字符串操作带来的隐式类型转换问题 - 滚动位移 =
-digit * digitHeight，注意负号方向（向上滚动才显“递增”感）
示例关键片段：
will-change: transform
- 只对正在动画的元素临时添加
will-change，动画结束立即移除 - 优先用
transform: translateZ(0)触发硬件加速，兼容性更好 - 移动端务必测试 iOS 微信内置浏览器（X5 内核）——它对频繁 transform 更新极敏感，建议将动画 duration 提高到 ≥1200ms，避免卡顿
如果只要简单计数（不带滚动视觉），用 Counter API 更轻量
现代 Chrome/Firefox/Edge 支持 CSS @counter-style 和 counter-increment，但仅适用于有序列表编号等静态场景；真要动态更新数字文本，最简方案仍是 JS + textContent。
示例（无滚动效果，仅数字递增）：
const el = document.getElementById('counter');
let count = 0;
const timer = setInterval(() => {
count++;
el.textContent = count;
if (count >= 1000) clearInterval(timer);
}, 30); // ≈33fps
这个方案没有视觉滚动，但零 CSS 依赖、内存占用低、iOS 安卓全兼容。很多业务场景其实不需要“滚动”这个视觉包袱，先确认设计是否真需拟物化滚动效果。
真正难的是多位同步滚动时的精度控制——小数点后两位、负数、千分位符号都会让位数对齐和位移计算变复杂，这些细节往往被教程忽略。
