真翻滚无法用@keyframes+counter-increment实现，因counter无中间态、@keyframes不支持位级动画；须用10行等宽数字纵向堆叠+translateY位移裁剪模拟，JS控制class切换更务实。
用 @keyframes + counter-increment 做不了真翻滚
想用纯CSS让数字像机械计数器那样“逐位翻滚”？比如从19变到20时，个位从9翻到0，十位从1滚到2——这事儿，@keyframes 和 counter-increment 组合还真办不到。根本原因在于，counter-increment 只能触发整数的瞬间变更，没有中间动画状态；而 @keyframes 也无法对单个数字字符进行位级的精细控制。所以，市面上看到的所谓“CSS翻滚计数”，本质上都是视觉模拟：靠多层数字堆叠，再用位移裁剪出动态效果。
核心思路：用 10 行数字字体 + transform: translateY() 滚动
那怎么模拟呢？其实思路很直观：把0到9这十个数字，像老式打字机的数字带一样，纵向排成一列。然后，用一个容器套住，设置 overflow: hidden 把多余部分裁剪掉，最后通过 transform: translateY() 来控制垂直位移，让特定的一行数字露出来。关键来了，每个数位（个、十、百…）都得独立控制，才能实现那种错落有致的翻滚节奏。
要实现这个效果，有几个细节必须卡死：
- 字体必须等宽：比如
'Courier New', monospace，否则数字宽度不一，滚动起来会错位。 - 行高与高度必须精确：每行的高度要严格等于字体大小（
font-size），并且设置line-height: 1来消除默认行距的影响。 - 容器高度要锁死：容器的高度必须等于单行数字的高度，不能依赖 padding 或 margin 去凑，否则裁剪会出问题。
- 动画时长有讲究：建议不少于0.3秒，太短了人眼捕捉不到翻滚过程，效果就没了。
.digit-roll {
font-family: 'Courier New', monospace;
font-size: 48px;
line-height: 1;
height: 48px;
overflow: hidden;
display: inline-block;
}
.digit-roll span {
display: block;
transform: translateY(-288px); /* -6 * 48px，显示数字 6 */
}
用 CSS 变量驱动翻滚？得绕开 calc() 在 transform 中的坑
你可能想用CSS变量来动态计算位移，比如写成 transform: translateY(calc(var(--n) * -48px))。但很遗憾，在大多数浏览器里，calc() 函数嵌套变量在 transform 属性中并不被支持。那怎么办？通常有两种应对策略：
- 预定义类名：直接预先写好10个类，比如
.n-0到.n-9，每个类里写死对应的translateY值（从0到-432px）。然后用Ja vaScript根据目标数字来切换元素的class，避开运行时的复杂计算。 - 尝试新特性：如果追求纯CSS方案且不考虑兼容性，可以试试
@property规则（Chrome 108+ 支持）来声明一个受控的自定义属性，再配合transition实现动画。但这目前只是实验性方案。
话说回来，最务实、最可控的方案，还是让Ja vaScript负责逻辑判断和状态切换，CSS只管表现层的动画曲线和位移效果。分工明确，问题也少。
立即学习“前端免费学习笔记（深入）”；
多位数字同步翻滚？小心这些常见的错位陷阱
当你要让一个多位数（比如“369”）的每个位同时翻滚时，经常会遇到数字错位、动画卡顿的问题。这通常是因为多个 .digit-roll 元素共用了同一段动画，但DOM渲染或JS执行顺序的微小差异，导致了步调不一致。
要解决这个问题，得从几个方面入手：
- 错开动画延迟：给不同数位设置不同的
animation-delay。例如，百位延时0.05秒开始，十位延时0.1秒，个位延时0.15秒，制造出波浪式的翻滚感。 - 锁定最终状态：使用
animation-fill-mode: forwards（简写为forwards）可以确保动画结束后，元素保持在最后一帧的状态，避免跳回初始值。 - 检查初始状态：确保每个数位的初始
transform值是正确的（比如从0开始），否则第一帧可能会闪现错误的数字。 - 高频更新需节流：如果数字变化非常频繁（比如实时计数器），务必用
requestAnimationFrame进行节流，否则CSS动画队列会堆积，导致性能下降和视觉混乱。
最后提个醒，翻滚效果的“真实感”和“高级感”，往往不在于滚得多快，而在于位与位之间那微小时差所带来的节奏，以及恰到好处的缓动（easing）曲线。在这方面，用Ja vaScript进行精细控制，通常比纯CSS方案更稳健、更灵活。
