用@keyframes配合animation实现逐字打字效果的核心是：固定容器宽度、overflow:hidden、white-space:nowrap，以width+ch单位配合steps(n,end)逐帧显示字符，禁用opacity/transform渐显，确保机械式跳变节奏。
如何用 @keyframes 配合 animation 实现逐字打字效果
核心思路是：把文字容器设为固定宽度，隐藏溢出，再通过 width 或 ch 单位控制显示长度，配合 steps() 让动画一帧一帧“跳”出来，避免模糊过渡。
关键不是靠 js 拆字符，而是纯 css 控制视觉节奏。常见错误是直接用 opacity 或 transform 做渐显——那不是打字机，是淡入。
- 必须设置
white-space: nowrap，防止换行打断节奏 - 必须用
overflow: hidden，否则多出的文字会撑开容器 - 动画时长要和文字长度匹配，否则太快/太慢都会失真
-
animation-timing-function: steps(N, end)中的N应等于字符数（含空格），end表示在每步结束时跳变
为什么推荐用 width + ch 而不是 max-width 或 clip-path
ch 是一个字符的平均宽度单位（基于 0 字形），对等宽字体最稳；对非等宽字体，width 配合 steps() 仍比 clip-path 兼容性好、性能高。
max-width 在动画中容易因重排导致卡顿；clip-path 的 inset() 或 rect() 在 safari 旧版本里不支持动画，且无法精准对齐字符边界。
立即学习“前端免费学习笔记（深入）”；
- 写法示例：
width: 0;→width: calc(1ch * 12);（假设 12 个字符） - 务必加
font-family: monospace或已知等宽字体来测试基准效果 - 若用比例控制（如
width: 0% → width: 100%），需配合box-sizing: content-box避免 padding 干扰
steps() 参数写错会导致动画“滑动”而不是“打字”
这是最常踩的坑：写成 steps(10) 或 steps(10, start)，结果文字像被拉伸着慢慢露出来，完全失去机械感。
-
steps(N, end)表示把整个动画分成N等份，每份结束时才跳到下一帧 -
end是关键——它让动画在每个时间点保持静止，直到下一帧突变，模拟真实打字停顿 - 如果文字是
"Hello world"（11 字符 + 1 空格 = 12），就必须写steps(12, end) - 漏掉第二个参数默认是
end，但显式写出更安全；写成start会导致第一帧就显示全部
兼容性与实际部署要注意的细节
IE 完全不支持 steps() 动画作用于 width，所以需要降级方案；另外，某些字体在 macos 和 windows 渲染的 ch 值差异较大，可能导致末尾字符截断或留白。
- 基础兼容写法：先写
animation: typing 3.5s steps(12, end), blink-caret .75s step-end infinite - 光标闪烁建议单独抽成另一个
@keyframes，用border-right实现，避免和主动画耦合 - 移动端 Safari 对
ch支持良好，但 ios 14 以下不支持steps()作用于width，可 fallback 到 JS 方案或改用transform: scaleX()（需配合transform-origin: left） - 如果内容动态加载，CSS 方案需预知字符数——否则得用 JS 注入对应
steps(N)值