直接用style.setproperty()改--char-count和--duration不能自动重播动画，因css动画仅首次读取变量值；需先设animation为none、触发offsetheight重排、再恢复animation才能强制重播。
直接用 style.setProperty() 改 --char-count 和 --duration 能控制打字节奏，但动画不会自动重播——这是最常被忽略的致命点。
为什么改了 CSS 变量动画却不更新
CSS 动画只在首次声明时读取变量值，后续 setProperty() 修改 --char-count 或 --duration 不会触发重启动画。视觉上表现为：文字突然全显、最后一字卡住、光标停在中间。
@keyframes typing { from { width: 0 } to { width: 100% } } 中的 steps(var(--char-count), end) 虽然实时响应变量，但播放状态冻结在旧步数上。
- 浏览器不监听自定义属性变化来重置动画状态
- 仅靠
animation属性字符串不变（如仍为typing 2s steps(15, end)），就不会重新计算帧序列 - 必须让浏览器“认为这是一个新动画”才能从头开始
强制重播动画的三种可靠写法
核心是打断当前动画流程，触发重排或重置动画上下文。推荐按稳定性排序：
- 先设
el.style.animation = 'none'，再调用el.offsetHeight强制同步重排，最后恢复完整animation字符串 - 切换
animation-name：比如从type→none→type，避免拼接整个animation值（易出错） - 用 class 控制：CSS 中写
.replay { animation: none; }和.replay.active { animation: type var(--duration) steps(var(--char-count), end) forwards; }，JS 切换 class 即可
第一种最稳，兼容 Chrome/Firefox/Safari 所有现代版本；第三种适合组件化场景，避免内联样式污染。
动态计算字符数时的三个易错点
textContent.length 看似简单，但中英文混排、Emoji、零宽字符会让 steps() 步数失准。
- Emoji 如
??实际是多个 Unicode 码点，textContent.length返回 5+，但视觉占位≈1字符，建议实测后硬编码--char-count - 中文标点（，。！？）算 1 字符，但某些字体下宽度 ≠
1ch，需配font-family: monospace或 Fira Code - 空格、换行符都计入长度；若误用
innerText会过滤它们，导致steps()步数不足、末尾字符不显示
更准的做法是用 Array.from(text).length 拆解为 Unicode 字符，比 textContent.length 更贴近视觉计数。
非等宽字体下 ch 单位失效怎么办
用 width + ch 是主流方案，但一旦 font-family 含比例字体（如 "Helvetica", sans-serif），1ch 值浮动，动画会跳帧。
- 首选方案：强制使用等宽字体，如
font-family: "Fira Code", "Source Code Pro", monospace - fallback 方案：改用
clip-path: inset(0 100% 0 0)动画裁剪区域，Chrome 107+/Firefox 110+/Safari 16.4+ 支持，不依赖字符宽度估算 - 极端情况：放弃
ch，预设平均字符宽度（如--avg-width: 0.6em），用calc(var(--char-count) * var(--avg-width))控制width
真正难的不是写动画，而是让每个字符在任意字体、任意设备上都对齐——这需要你亲手测过 ??你好！ 这类混合文本在目标字体下的实际渲染宽度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
