纯 CSS 打字机效果最稳方案是 width 动画配合 steps(N, end)，因 width 能稳定触发重排并逐帧裁剪，steps(N, end) 实现严格 N 步跳变、每步显一字符，且需等宽字体、精确字符数、nowrap 等配套约束。
纯 CSS 打字机效果能做，但必须用 steps() 配合 width 动画，且字符数、单位、字体三者必须对齐；否则不是漏字、卡顿，就是首帧闪一下或光标错位。
为什么 width + steps(N, end) 是最稳的组合
因为浏览器无法对文字内容做动画，width 是唯一能被所有现代浏览器稳定触发重排并逐帧裁剪的属性。配合 steps(N, end) 后，动画不再插值，而是严格分 N 步跳变——每步只“多露一个字符”，视觉上就是机械式打字。
-
end参数不能省：用start会导致第一帧就显示全部文字；用end才是“到这步结束时才跳”，符合打字节奏 -
width必须从0开始，终点必须是精确的Nch（不是100%），否则在非等宽字体下会偏移 - 动画声明里必须写完整：
animation: typing 2.5s steps(10, end), blink-caret .75s step-end infinite，两个动画用逗号分隔，不能合并
ch 单位怎么用才不翻车
ch 看似方便，实则依赖字体度量。它取的是当前字体中 "0" 字符的宽度，所以只有等宽字体下才真正“一字符一 ch”。中英文混排时，中文常占 1–2 ch，Emoji 可能撑满整行——这不是 bug，是字体本身决定的。
- 必须显式设置
font-family: monospace或具体等宽字体（如Consolas,Fira Code），否则1ch不等于一个字符宽度 - 必须加
white-space: nowrap，否则换行会破坏ch计算逻辑 - Firefox 对连字（如
fi,fl）处理异常，建议加font-variant-ligatures: none - 容器若有
padding或border，记得设box-sizing: border-box，否则width: 10ch实际超出预期
字符数填错会直接崩效果
steps(10, end) 里的 10 必须和文本总字符数完全一致（含空格、标点、换行符）。少填 1，最后一个字永远出不来；多填 1，最后会卡住半秒——用户感知就是“打到一半停了”。
立即学习“前端免费学习笔记（深入）”；
- 别靠眼睛数：中文、全角标点、Zero Width Joiner（ZWJ）Emoji 都算 1 字符，但肉眼难分辨
- 推荐用 JS 动态计算：
el.textContent.length，再注入 CSS 变量：el.style.setProperty('--char-count', el.textContent.length) - 如果用
100%替代Nch，动画会受父容器宽度影响，响应式下极易错位 - 动画时长建议 ≥
0.05s × 字符数，太快人眼跟不上，太慢像加载失败
光标动画为什么总闪烁不自然
光标不是附属效果，它和打字节奏强耦合。单独用 opacity 或 border-color 动画，若没配对 step-end，就会在帧中间切换状态，造成“虚影”或“双光标”。
- 必须用
step-end（等价于steps(1, end)），确保光标只在每步结束瞬间切换 - 光标颜色建议用
currentColor，避免和文字色脱节 - 不要把光标塞进主动画里，必须独立声明第二个
@keyframes并叠加 - 动画结束后，光标应停留在末尾：加
forwards到打字动画，但光标动画保持infinite
最易被忽略的是可访问性：屏幕阅读器会立刻读出完整文本，而视觉上还在“打字”。如果这段文字承载关键信息，得考虑用 aria-live 控制播报时机，或者干脆降级为 JS 驱动的逐字插入 —— CSS 打字机效果，本质是装饰，不是内容交付通道。
