steps() 动画不能直接用 css 变量控制，因为浏览器无法在 animation-timing-function 的函数参数中解析 var() 为有效数值，导致退化为 ease 或失效；需通过 @property（chrome 103+/safari 16.4+）间接调控或 js 动态重写 animation 字符串实现真正动态调速。
为什么 steps() 动画不能直接用 CSS 变量控制
因为 steps() 是 animation-timing-function 的一个函数值，而 CSS 变量无法在函数参数位置被解析为数值——浏览器会把它当作无效的 timing function，退回到 ease 或直接失效。你写 steps(var(--step-count))，结果就是动画变成缓动，打字效果完全消失。
绕过限制：用 @property + steps() 关键帧动态生成
Chrome 103+ 和 Safari 16.4+ 支持 @property 声明可动画的自定义属性，配合 animation-timeline 还不成熟，但我们可以用它驱动 counter-increment 或伪元素内容切换——更实际的做法是：把「速率」映射为「每步持续时间」，用 animation-duration 配合固定 steps(10) 来间接调控快慢。
- 设定总动画时长
--duration: 2s，字符数 10 → 每步约 200ms - 想变快？减小
--duration；想变慢？增大它；steps(10)保持不变 - 关键：字符数必须已知（或用 JS 注入），否则
steps()步数不匹配会导致截断或空格残留 - 示例：
.typewriter { --duration: 1.5s; --char-count: 12; animation: type var(--duration) steps(var(--char-count)) forwards; } @keyframes type { from { width: 0; } to { width: 100%; } }（注意：这里steps()仍不能用变量，所以需 JS 注入真实步数，或预设几档固定值）
真正动态调速：用 JS 更新 style.animation 字符串
这是目前最可靠、兼容性最好的方案。CSS 变量负责存速率值（如 --speed: 80 表示 80ms/字），JS 读取后算出总时长和 steps 数，再重写 element.style.animation。
- 假设文本共 15 个字符，
--speed: 60→ 总时长 =15 * 60 = 900ms，steps(15) - 更新动画：
el.style.animation = `type ${totalMs}ms steps(${charCount}) forwards`; - 监听 CSS 变量变化可用
MutationObserver监听style属性，或封装成 setter 方法 - 避免重复触发：节流更新，且只在
--speed真正变化时重写 animation 字符串
容易被忽略的细节：font-width、letter-spacing 和空白符处理
打字机效果的「速率感」不仅取决于 steps 时间，还受字体实际宽度影响。等宽字体（font-family: monospace）下每步宽度一致，效果稳定；非等宽字体中，「i」和「w」占位差异大，单纯靠 width 动画会跳动或卡顿。
- 推荐用
ch单位做宽度动画：width: calc(var(--char-count) * 1ch)，比em或百分比更准 - 确保
white-space: nowrap，否则换行会干扰steps()计数 - 隐藏光标闪烁与打字不同步？把光标
::after的animation-delay设为calc(var(--duration) * -1)（需 JS 计算后注入） - 中文混排时，全角字符宽度 ≈ 2ch，半角 ≈ 1ch —— 若需精确，得用 Canvas 测量真实像素宽度再反推 steps
真正难的不是写出来，而是让「速率」在各种字体、DPI、缩放比例下看起来一致。别迷信纯 CSS 方案，该用 JS 就用 JS，尤其是需要 runtime 调速的场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
