直接用animation+width常失效，因width仅对块级或inline-block元素生效，内联元素需显式设display；中文逐字显示用ch单位+steps()更可靠，可精准控制每字一帧。
为什么直接用 animation + width 会失效
因为 width 是非可动画的 CSS 属性（除非是 max-width 或配合 overflow: hidden 的容器），单纯 animating width 不会触发文字逐字显现。真正起作用的是 ch 单位配合 steps() 时间函数——它把动画切成离散帧，每帧刚好“多露一个字符”。
关键点：ch 表示当前字体中 “0” 字符的宽度（不是所有字符等宽，但对等宽字体如 monospace 非常可靠）；steps(N, end) 把整个动画时长均分为 N 步，且在每步结束时跳变（end 是必须的，否则首帧就全显）。
- 必须给容器设
overflow: hidden，否则文字始终可见 - 必须用等宽字体（如
font-family: monospace, 'Courier New'），否则ch宽度不等于字符实际宽度 - 动画 duration 要和字符数匹配：比如 12 字符，想每 0.1s 出一个，总 duration 就是
1.2s
如何用 CSS 变量动态控制打字速度与文本长度
硬编码 steps(12) 和 1.2s 很不灵活。用 CSS 变量可让组件复用：外部传入字符数 --char-count 和单字耗时 --char-delay，内部自动算出 steps() 和 animation-duration。
:root {
--char-count: 15;
--char-delay: 0.08s;
}
<p>.typewriter {
font-family: monospace;
overflow: hidden;
white-space: nowrap;
animation: type var(--char-delay) * var(--char-count) steps(var(--char-count), end) forwards;
}</p><p>@keyframes type {
from { width: 0; }
to { width: calc(var(--char-count) * 1ch); }
}</p>
注意：calc(var(--char-count) * 1ch) 是合法的，但 steps(var(--char-count), end) 在部分旧浏览器（如 Safari steps() —— 这时得用 JS 注入或预编译。
遇到 steps() 不生效的常见原因
最常踩的坑不是写法错，而是渲染上下文不满足：
-
width动画目标值没生效：检查是否被min-width/flex等覆盖，建议显式写min-width: 0 -
ch单位在非等宽字体下严重偏移：用getComputedStyle(el).fontFamily确认实际生效字体 - Safari 中
steps()参数为变量时回退为ease：可用@supports (animation-timing-function: steps(1, end))做特性检测，降级为 JS 实现 - 文字含空格或换行符：空格也占
1ch，但视觉不可见；若需忽略前导空格，得用 JS trim 后再设--char-count
要不要用 mask-image 替代 width？
可以，而且更健壮：用 mask-image: linear-gradient(90deg, #000 0%, #000 50%, transparent 50%) 配合 mask-size 动画，能绕过 width 的盒模型干扰，也兼容非等宽字体（只要用 ch 控制 mask 宽度）。但代价是 Safari 需加 -webkit-mask 前缀，且 mask-size 的 steps() 同样受变量限制。
真正难处理的，是响应式场景下字符数动态变化（比如窗口缩放导致换行）——这时 CSS 变量无能为力，必须交由 JS 监听 resize 并重设 --char-count。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
