纯CSS无法用变量驱动steps()步数，因解析器不支持timing-function中变量计算，必须JS注入或@property配合关键帧；ch单位+monospace字体+强制重播才是可靠方案。
纯 CSS 无法用变量直接驱动 steps() 的步数参数，所谓“变量组合实现多重打字机”必须靠 JS 注入或 @property 配合关键帧重写——否则动画会退化为 ease，效果全无。
为什么 steps(var(--n)) 一定失效
CSS 解析器在 animation-timing-function 里不支持变量计算，steps(var(--char-count), end) 会被当作非法值丢弃，浏览器 fallback 到默认缓动曲线。你看到的“动了”，其实是平滑拉伸，不是逐字卡顿。
- Chrome / Safari 最新版本（≥103 / ≥16.4）才支持
@property声明可动画的自定义属性，且仅限于number、color等有限类型 -
steps()的第一个参数必须是整数字面量，不能是计算结果或变量引用 - 即使用了
@property，也无法让steps()动态响应变化——它只影响关键帧内可动画属性（如width），不影响 timing function 本身
真正可行的“变量组合”方案：JS 控制 + CSS 变量透传
把字符数、总时长、延迟等作为输入，由 JS 计算后写入 style 或 :root，再让 CSS 关键帧读取——这是目前最稳定、兼容性最好的方式。
- 用
element.style.setProperty('--char-count', text.length)更新变量 - CSS 中用
width: calc(var(--char-count) * 1ch)和animation-duration: var(--duration)驱动宽度与节奏 -
steps()步数仍需硬编码（如steps(24, end)），但可通过 JS 动态重写element.style.animation字符串来切换，例如：el.style.animation = `typing 2.4s steps(${n}, end)` - 多行打字机必须给每行单独设
animation-delay，且光标只保留在最后一行，否则视觉混乱
用 ch 单位替代 em 是关键细节
中英文混排时，em 宽度浮动大（中文≈1em，英文小写字母≈0.5em），会导致 width 不准、漏字或提前停住；ch 基于 “0” 字符宽度，在等宽字体下基本 ≈ 1 字符，更可靠。
立即学习“前端免费学习笔记（深入）”；
- 必须配
font-family: monospace, Consolas, 'Courier New'，否则ch行为不可控 -
calc(var(--char-count) * 1ch)要求--char-count是纯数字，不能带单位或空格 - 字符数变更后，需强制触发动画重播：先移除 class，
void el.offsetWidth强制重排，再加回 class
最容易被忽略的是：动画重播逻辑。很多人改了 --char-count 就以为完事，但浏览器不会自动重启 animation，必须手动清空再恢复 —— 否则 steps() 还是旧值，新文本永远卡在中间。这不是 bug，是 CSS 动画模型的设计约束。
