用 steps() 实现逐字动画的关键原理是：css 动画配合 steps(n) 将 width 从 0ch 到 nch 的变化“卡帧”为每步显示一个字符，需等宽字体、nowrap、overflow:hidden 及精确字符数。
用 steps() 实现逐字动画的关键原理
逐字显现不是靠 JS 拆字符串，而是用 CSS 动画配合 steps() 把单行文本的显示过程“卡帧”成一个字一帧。核心在于：把文字全部写进 HTML，用 overflow: hidden 配合 width 从 0 动画到完整宽度，再用 steps(n) 把这个宽度变化切成 n 步——每步刚好撑开一个字符。
注意：steps() 的步数必须等于字符数（含空格），否则会跳字或卡住；中英文混排时，中文、英文、标点通常都算 1 字符，但全角空格、emoji 可能占位异常，得实测。
animation 和 steps() 的参数怎么配才不丢字
常见错误是直接对 width 做 linear 动画，结果字体渲染宽度不准，最后一个字闪一下才出来。正确做法是用 ch 单位控制宽度，并绑定字符数：
-
width动画起点设为0ch，终点设为Nch（N 是字符总数，可用 JS 算，或手写死） -
animation-timing-function: steps(N, end)，end表示每步在区间末尾生效，避免首帧空白 - 必须加
white-space: nowrap，否则换行会破坏逐字逻辑 - 父容器要设
overflow: hidden，且不能有 padding 或 border 干扰宽度计算
示例：
.title {
white-space: nowrap;
overflow: hidden;
animation: type 2s steps(12, end);
}
@keyframes type {
from { width: 0ch; }
to { width: 12ch; }
}
中英文混排和响应式下的兼容性坑
ch 单位在多数现代浏览器里按等宽字体的 0 宽度算，但实际字符宽度不等（比如 i 比 w 窄），导致英文多时动画快慢不均。更麻烦的是，Chrome 115+ 对非等宽字体下 ch 的解析有偏差，可能少显一两个字。
- 稳妥方案：用等宽字体（如
font-family: monospace）保精度，或改用em+ 字体平均宽度估算（比如 0.6em/字） - 响应式场景下，字号变化会导致
ch值失效，建议用 JS 监听resize重设animation的to值，或直接切回 JS 控制 - Safari 对
steps()动画中动态改width支持不稳定，避免在动画运行中修改字符内容
为什么不用 JS 逐个 span 包裹再 show
手动拆字加 span 确实可控，但代价高：DOM 节点暴增、SSR 渲染变慢、SEO 文本结构被破坏、可访问性（screen reader）读断句。CSS 方案本质是视觉欺骗，原文本保持完整语义。
- 如果标题含链接或强调标签（如
<strong></strong>），别拆——直接套在外层，用display: inline-block配合overflow同样生效 - 动画结束需要交互（比如点击跳转），记得加
animation-fill-mode: forwards，否则鼠标移上去时可能回退到 0 宽度 - 性能敏感场景（如列表项批量标题），避免同时触发大量
steps()动画，浏览器重排压力大，可加will-change: width提前提示
真正难的不是写对那几行 CSS，而是字符数得算准、字体得压住、响应式边界得测全——漏一个，用户看到的就是半截字或者直接不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
