用 steps() 配合 @keyframes 可实现纯 CSS 数字滚动翻动效果，核心是将数字变化离散化为等步长帧动画，如 0→9 设 steps(10, end)，通过 transform: translateY() 移动多行数字文本实现翻页错觉。
用 steps() 配合 @keyframes 实现数字滚动翻动效果，核心是把数字变化“切帧”，让视觉上像老式计数器那样一格一格跳变，而不是平滑过渡。
关键原理：steps() 控制动画分步执行
steps(n, start/end) 是 animation-timing-function 的一种，它把整个动画过程平均切成 n 步，并在每步结束（或开始）时突变。要模拟翻页效果，必须让数字变化和帧切换严格对齐。
- 假设显示 0→9，共 10 个状态，就设
steps(10) - 配合
background-position或transform: translateY()移动数字图谱，或用伪元素 + 多行文本实现“翻牌”错觉 - 动画 duration 要足够短（如 0.3s），否则看起来拖沓；
steps(10, end)更常用，表示在每步结束时跳到下一帧
纯 CSS 实现翻页式数字动画（无 JS）
适合固定范围、预知起止值的场景，例如倒计时终点已知为 123：
.digit {
display: inline-block;
width: 24px;
height: 36px;
line-height: 36px;
font-family: monospace;
text-align: center;
overflow: hidden;
background: linear-gradient(to right, #fff, #f0f0f0);
/* 用多行数字堆叠，通过 translateY 滚动 */
}
.digit::before {
content: "0123456789";
display: block;
line-height: 36px;
}
.digit.animate::before {
animation: rollUp 0.3s steps(10, end) 1;
}
@keyframes rollUp {
from { transform: translateY(0); }
to { transform: translateY(-360px); } /* 10 行 × 每行高 36px */
}注意：此法要求所有数字等宽等高，且容器高度刚好卡住单行。若需多位数，每个数字单独套一层 .digit 元素即可。
立即学习“前端免费学习笔记（深入）”；
配合 JS 动态控制更灵活
CSS 只负责“翻”的动作，JS 负责“翻多少次”。比如从 100 变到 217，需滚动 117 次：
- 用 JS 计算差值，生成对应次数的
steps(N)和translateY(-N * 单行高) - 动态设置
style.animation或切换预设 class（如.roll-117） - 避免直接改
content，优先用transform或background-position触发硬件加速
常见避坑点
翻不动？跳太快？样式错位？多半是这几个原因：
- 行高/容器高没对齐：每行数字高度 × 行数 ≠ 总位移，会导致最后一帧截断或留白
-
steps 数量与实际状态数不匹配：比如 0–9 是 10 个数，但设了
steps(9)，就会漏一帧 -
未关闭抗锯齿或字体渲染干扰：加
font-smoothing: antialiased;或用无衬线等宽字体（如Consolas,monospace）提升清晰度 -
动画未重置就重复触发：每次播放前先移除 class 再添加，或用
animation-fill-mode: forwards锁定终态
基本上就这些。不用 JS 也能做出有质感的数字翻动，关键是把变化“离散化”，再用 steps() 把它一帧一帧喂给浏览器。
