@keyframes打字机效果核心是用width或clip-path控制可见区域，配合monospace字体和ch单位实现稳定节奏，避免opacity切换导致重排；需设white-space:nowrap、overflow:hidden，注意兼容性与无障碍支持。
用 @keyframes 模拟打字机效果的核心逻辑
关键不是“逐字显示”，而是靠 width 或 clip-path 控制可见区域，配合 monospace 字体和固定宽度字符保证节奏稳定。直接用 opacity 或 visibility 切换每个字符会触发大量重排，性能差且难以控制停顿。
推荐用 ch 单位配合 width 动画：一个 ch 约等于当前字体中 “0” 的宽度，对等宽字体（如 Consolas, Roboto Mono）最准。动画时长按总字符数 × 单字耗时（常见 0.15s–0.25s）计算。
- 必须设
white-space: nowrap，防止换行打断动画 - 加
overflow: hidden，否则超出部分会撑开容器 - 避免在
font-family中混用比例字体（如Helvetica），否则ch值浮动导致跳帧
clip-path 替代 width 的兼容性取舍
Chrome 107+、Firefox 110+、Safari 16.4+ 支持 inset() 形式的 clip-path 动画，比 width 更精准——它不依赖字符宽度估算，直接裁剪内容区域。但旧版 Safari（width。
示例写法：
@keyframes type {<br> from { clip-path: inset(0 100% 0 0); }<br> to { clip-path: inset(0 0 0 0); }<br>}注意：clip-path 动画需搭配 will-change: clip-path 提前告知浏览器优化渲染路径，否则 iOS 上易卡顿。
立即学习“前端免费学习笔记（深入）”；
- 不要用
clip: rect()（已废弃，且不支持动画） - 若需支持 Safari 15.x，改用
mask+ 线性渐变，但增加 DOM 节点负担 -
clip-path在 flex/grid 子项中可能被父容器裁剪，需检查overflow设置
如何让光标闪烁与打字节奏同步
光标不是独立动画，而是和打字动画绑定的伪元素。用 ::after 生成竖线，其 animation-delay 必须严格等于打字动画总时长，否则出现“字打完了光标还在闪”或“光标提前消失”。
例如 20 字 × 0.2s = 4s 打字时长，则光标动画应：
.typing::after {<br> content: '';<br> display: inline-block;<br> width: 2px;<br> background: currentColor;<br> animation: blink 1s step-end infinite;<br> animation-delay: 4s;<br>}
- 用
step-end而非linear，确保光标“硬切换”，无淡入淡出 - 若文本含空格或标点，需统一按字符数计算时长，别漏掉
- 移动端键盘弹出时，
animation-play-state: paused可能意外触发，建议加window.matchMedia('(pointer: coarse)')检测后禁用动画
React/Vue 中动态更新文本时的重播控制
框架里直接改 textContent 不会重置 CSS 动画，需强制 key 变更或手动重置 animation。Vue 的 v-if 或 React 的 key={Date.now()} 最简单，但频繁重渲染影响性能；更优解是用 animation-play-state 控制暂停/重播。
实操建议：
element.style.animation = 'none';<br>setTimeout(() => {<br> element.style.animation = 'type 4s steps(20) forwards';<br>}, 10);注意：steps(20) 的数值必须与新文本字符数一致，否则跳帧或卡住。
- 不要依赖
animationend事件清理状态，某些安卓 WebView 不触发该事件 - 服务端渲染（SSR）场景下，首屏动画需判断
document.visibilityState === 'visible'再启动，避免后台标签页浪费资源 - 无障碍方面，加
aria-live="polite"并在动画结束时aria-busy="false"，否则屏幕阅读器会重复读取中间态
ch 值偏移，还有 SSR 下首屏动画时机——这些细节没调好，用户看到的就是一顿一顿的“卡顿打字”。 
