数字滚动动画不能直接用transform: translateY()，因其本质是逐位切换离散值而非连续位移；CSS计数器无法动画，必须预渲染数字图谱配合background-position或DOM列表配合clip-path实现。
数字滚动动画为什么不能直接用 transform: translateY() 模拟
很多人尝试用位移 + overflow:hidden 做“翻页式”滚动，结果在 iOS Safari 上卡顿、跳帧，甚至数字错位。根本原因是：纯 transform 移动的是整个元素容器，而数字滚动的本质是「逐位切换离散值」，不是连续位移。CSS 计数器（counter-increment）本身不触发重绘，必须配合 ::before/::after 伪元素和 content 才能输出数值——但这个过程无法直接动画。所以真正可行的路径只有一条：预渲染所有数字，用 keyframes 控制背景位移或 clip-path 裁剪。
用数字字体图谱 + background-position 实现平滑滚动
这是兼容性最好、性能最稳的做法。把 0–9 十个数字垂直拼成一张图（高度 = 10 × 行高），再用 background-image 贴到一个固定尺寸的容器上，通过 background-position 的 y 值变化实现“滚动”效果。
实操要点：
- 字体图谱必须是等高、无间距、顶部对齐的单列 PNG，推荐宽度 40px、单数字高度 60px（适配 3x 屏可做 180px 总高）
- 容器设
height: 60px、background-size: auto 600px（总高 = 10 × 单高），background-repeat: no-repeat - 动画关键帧中，y 偏移量按
-n × 60px设置，例如从 3 滚到 7，起始background-position: 0 -180px，结束background-position: 0 -420px - 务必加
will-change: background-position，iOS Safari 才会启用 GPU 加速
/* 示例：滚动到数字 5（索引从 0 开始，5 对应 y = -300px） */
@keyframes roll-to-5 {
from { background-position: 0 -120px; } /* 当前是 2 */
to { background-position: 0 -300px; } /* 滚到 5 */
}
clip-path + 数字列表的方案适合动态值但要注意裁剪精度
当目标数字不确定（比如实时价格、倒计时秒数），预生成图谱不现实，就得用 DOM 列表 + clip-path 裁剪。原理是：把 0–9 十个 <span> 垂直堆叠，父容器设固定高度和 overflow: hidden，再用 clip-path: inset(0 0 100% 0) 配合 translateY() 暴露对应数字。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
-
clip-path: inset()在旧版 Android WebView 中不支持，需降级为overflow: hidden+transform: translateY()，但要加backface-visibility: hidden防闪烁 - 每个数字
<span>必须设display: block和精确行高（如line-height: 60px），否则裁剪错位 - 动画起始/结束帧的
transform值必须是整数倍行高，否则出现半像素模糊，iOS 尤其敏感 - 不要用 CSS 计数器生成数字内容——它无法响应式更新，且
content不参与 layout，clip-path裁不到
为什么不用 counter() + animation 直接驱动
因为 counter-increment 是 layout 触发行为，无法被 @keyframes 控制节奏；counter() 只能在 content 中使用，而 content 属性本身不可动画。你写 content: counter(num); animation: change-num 1s;，浏览器会直接忽略动画声明——这不是 bug，是规范限制。
真正需要动态数字时，只能靠 JS 更新 data-num 属性，再用属性选择器匹配不同 background-position 或 transform 值。CSS 本身没有“数字插值”能力，所有“滚动感”都是视觉欺骗。
最常被忽略的一点：滚动动画的 easing 必须用 cubic-bezier(0.33, 1, 0.68, 1) 这类缓出+缓入曲线，生硬的 linear 会让人眼明显感知到“跳格”。
