最稳妥的逐字动画方案是用 javascript 将按钮文本拆分为单个 元素，再通过 css @keyframes 为每个 设置带递增 animation-delay 的 opacity 和 transform 动画，避免修改 layout 触发属性，并兼容旧浏览器。
用 CSS @keyframes 实现逐字动画最稳妥
直接用 JavaScript 逐个插入字符容易破坏语义、影响可访问性，也难控制节奏。CSS 动画更轻量、可复用，且支持暂停/重播/反向播放。关键点是把按钮文字拆成单个 <span></span>，再对每个 <span></span> 应用相同动画但设置不同 animation-delay。
- 先用 JavaScript 把按钮文本转为包裹每个字的
<span></span>，例如：<button><span>开</span><span>始</span><span>吧</span></button> - CSS 中定义动画：从
opacity: 0到opacity: 1，配合transform: translateY(5px)增加轻微上浮感 - 每个
<span></span>的animation-delay按索引递增，比如0.1s、0.2s、0.3s - 注意：不要用
visibility: hidden替代opacity: 0，否则会触发重排，动画卡顿
letter-spacing 和 overflow 容易导致布局错位
逐字动画常伴随「文字从左往右展开」的视觉需求，有人会尝试用 width 或 clip-path 控制显示区域。但按钮宽度固定时，letter-spacing 动态变化会让整体宽度跳变，尤其在中英文混排时更明显。
- 避免在动画中修改
letter-spacing或font-size—— 它们会触发 layout，拖慢帧率 - 如果必须隐藏未显现部分，用
overflow: hidden包裹按钮容器，而不是按钮自身（按钮设overflow: hidden可能裁掉边框或阴影） - 中文字符等宽，但英文标点、全角/半角混排时，
ch单位比em更稳定；不过动画延迟还是按字符数算更可靠
JavaScript 控制时机时别直接操作 innerHTML
想让动画在点击后触发，或配合异步加载完成后再播放？这时候容易写成 btn.innerHTML = '加载中...' 再手动拆字 —— 这会销毁原有事件监听器，也清空了所有内联样式和 data 属性。
- 改用
textContent获取原始文字，再用Array.from(text).map(...)构造<span></span>节点数组 - 用
btn.replaceChildren(...spans)替代innerHTML，保留按钮的原生属性和绑定事件 - 动画播放前加个
getComputedStyle(btn).display检查是否已渲染，避免在display: none状态下触发动画却看不到效果 - 如果按钮本身有
disabled状态，记得动画期间保持pointer-events: none，防止重复点击
IE 和旧版 Safari 不支持 animation-fill-mode: forwards 的兼容处理
现代浏览器里用 animation-fill-mode: forwards 能让最后一个关键帧生效，文字保持完全显示。但在 Safari 12 以下或 IE11 中，动画结束后文字会瞬间回退到初始透明状态。
- 补救方案：动画结束时用 JS 给所有
<span></span>加style.opacity = '1'，或添加一个 class 触发强制重绘 - 更简洁的做法是放弃
forwards，改用opacity: 1作为动画终点，并在动画声明末尾显式写opacity: 1（不依赖 fill-mode） - 测试时务必在真机 Safari 上验证：iOS 14.5 之前版本对
transform+opacity复合动画有渲染残留问题，可加backface-visibility: hidden缓解
0.1s 间隔足够自然；超过 8 字建议放缓到 0.15s，否则用户来不及识别。动画时间本身不宜短于 0.3s，否则看不出「逐字」过程。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
