steps() 是打字机效果的关键，因其能强制动画分N步离散执行，每步只显示前N个字符宽度，配合width+overflow:hidden实现逐字显现，且steps(N,end)中N需匹配可见字符数、end确保首帧不闪现。
为什么 steps() 是打字机效果的关键
因为打字机效果本质是「逐字显示」，而 animation-timing-function 默认的缓动曲线（如 ease）会让宽度过渡平滑，文字像被拉伸出来——这不是打字，是橡皮筋。只有 steps(10, end) 这类步进函数能强制动画在 10 个离散帧里，每帧只显示前 N 个字符对应的宽度，模拟真实敲击节奏。
关键点：steps(N, end) 中的 N 必须等于目标文本的字符数（含空格），end 表示每步变化发生在该步结束时，避免首帧就显示全部。
如何用 width + overflow: hidden 实现逐字显现
不能直接对 content 做动画，CSS 动画不支持伪元素内容变化。正确路径是：固定容器宽度为 0，通过 width 从 0 动态增长到文本自然宽度，并配合 overflow: hidden 截断溢出部分。
- 文本必须用单行显示：
white-space: nowrap - 容器需设
display: inline-block或inline-flex，否则width动画无效 - 字体必须等宽（如
font-family: monospace）或确保所有字符宽度一致，否则width增长和字符数不严格对应 - 动画时长要按字符数缩放，比如 20 字符建议至少 2s，否则太快看不出“打字”感
steps() 的参数选 start 还是 end？
选 end。如果用 steps(5, start)，动画第一帧就会显示第 1 个字符（因为变化发生在步开始时），导致“闪现第一个字”，破坏打字节奏。而 steps(5, end) 保证第 1 帧全黑，第 2 帧才出现第 1 字，符合直觉。
立即学习“前端免费学习笔记（深入）”；
验证方法：把动画延时设为 animation-delay: -0.1s，观察首帧是否为空；非空就是误用了 start。
示例关键代码：
animation: type 2s steps(12, end) forwards;<br>width: 0;<br>white-space: nowrap;<br>overflow: hidden;
遇到中文/emoji/空格时宽度计算不准怎么办
中文字、emoji、全角空格宽度不等于英文字符，steps(12, end) 中的 12 如果按字符串 .length 算，很可能错——一个 emoji 可能占 2 个码点，一个中文字符在某些字体下宽度是英文的 2 倍。
- 最稳做法：手动数可见字符数（不是
.length），用浏览器开发者工具测最终scrollWidth，反推每字符平均像素，再设width关键帧 - 快速妥协方案：改用
ch单位定义宽度（如width: 12ch），ch指数字 0 的宽度，在等宽字体下较可靠 - 避免混排：尽量不要在同一行同时写英文、中文、emoji；如必须，用
span分段，各自配独立动画
真正难的不是写出来，是让不同字体、不同系统下都看起来像“人在敲”——这得靠实测，不是靠公式。
