打字机动画需将字符逐个包裹在中并用@keyframes控制opacity，配合step-end缓动、animation-fill-mode:forwards及white-space:nowrap；js预处理生成span结构，注意unicode兼容与无障碍优化。
用 @keyframes 控制字符显示节奏
打字机动画本质是让文字逐个“出现”，但 CSS 没法直接操作单个字符，所以得先把每个字符包进独立的 <span></span>，再用 @keyframes 控制 opacity 或 visibility。别用 width 动画——它依赖字体宽度，等宽/非等宽字体表现不一致，且无法适配换行。
关键点在于：动画时长要和字符数匹配，否则快慢失衡。比如 10 个字，总动画时长设为 2s，那每个字符间隔就是 200ms；用 step-end 缓动函数才能实现“突显”而非渐变。
- 必须给容器设
white-space: nowrap防止换行打断动画序列 -
animation-fill-mode: forwards确保最后一帧保持可见，否则动画结束文字会消失 - 避免对整个文本块用
overflow: hidden+width动画——它只在单行生效，多行或响应式场景下失效
用 JavaScript 预处理生成 <span></span> 包裹结构
手动写 <span></span> 套每个字太蠢，尤其内容动态加载时。用 JS 把字符串转成带索引的 <span></span> 数组最稳：
const el = document.querySelector('.typing');
el.innerHTML = el.textContent.split('').map((char, i) =>
`<span style="animation-delay: ${i * 120}ms">${char}</span>`
).join('');
注意：空格、换行符也会被包裹，如果不需要，提前过滤掉 char.trim() !== ''；中文、英文、符号混排时无需额外处理，.split('') 在现代浏览器中能正确处理 Unicode 字符（包括 emoji）。
- 不要用
innerText替代textContent，前者会丢弃 HTML 实体和格式 - 如果文本含 HTML 标签（如
<strong></strong>），先做 DOM 解析再遍历文本节点，否则标签会被当普通字符渲染 - 动画延迟单位统一用
ms，避免小数秒（如0.12s）在某些浏览器中触发渲染抖动
兼容性与性能陷阱：IE 不支持 animation-delay 负值，但你根本不需要它
有人想用负延迟让多个 <span></span> 动画“错峰启动”，结果发现 IE11 下失效。其实没必要——所有 <span></span> 共享同一段 @keyframes，只靠 animation-delay 递增就能串起节奏。负延迟反而容易导致首字符闪一下再开始。
- CSS 动画在低端安卓 WebView 中可能掉帧，建议加
will-change: opacity提前声明优化 - 超过 50 字时，一次性创建 50+
<span></span>可能引发重排，可考虑分批渲染或降级为纯 CSS 的ch单位截断动画（仅限单行） - 无障碍方面：屏幕阅读器会逐字读出，如果语义断裂（比如“欢迎来”被拆成“欢”“迎”“来”三帧），需加
aria-label补全整句
响应式中断时如何暂停并恢复动画
窗口缩小时，文字换行会导致字符顺序错乱，动画看起来像乱码。不能靠媒体查询重置 animation，因为已运行的动画状态无法被 CSS 捕获。稳妥做法是监听 resize，用 JS 暂停当前动画、清空并重建 DOM 结构：
window.addEventListener('resize', () => {
const el = document.querySelector('.typing');
el.innerHTML = '';
// 重新执行上面的 span 生成逻辑
});
更轻量的方式是限制容器最大宽度 + 强制单行，用 text-overflow: ellipsis 截断，避免换行干扰动画流。真需要多行打字效果？那就得用 Canvas 或 SVG 逐行控制，CSS 本身不擅长这个。
最常被忽略的是光标闪烁的同步问题：单独用另一个 <span></span> 做光标，它的动画周期必须和最后一个字符的出现时间对齐，否则看起来像打字中途卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
