打字机动画不能用opacity渐显，因需模拟字符逐个出现的节奏感；必须用width+steps()阶梯式展开，配合overflow:hidden和white-space:nowrap等样式，并按字符数设置steps()参数。
打字机动画为什么不能直接用 opacity 渐显
因为真正的打字效果是“字符逐个出现”，不是整体淡入。用 opacity 或 transform: translateX() 模拟，视觉上会漏掉关键节奏感——文字得像被一个一个敲出来，中间有停顿、有光标闪烁。核心在于控制可见宽度从 0 到完整文本长度的“阶梯式”展开，而 steps() 就是干这个的。
width + steps() 动画的关键写法
必须配合 overflow: hidden 和固定宽高容器，让文字在宽度为 0 时完全不可见，再通过 width 动画逐步“拉出”。steps(10, end) 中的 10 不是随便写的，它应≈文本字符数（中文按 1 字符计，英文/符号同理），end 表示每步动画在区间末尾触发，才能卡准“打出一个字就停住”的节奏。
常见错误：
- 忘加 white-space: nowrap，导致文字换行破坏宽度计算
- 容器没设 display: inline-block 或明确 width，width: 0 → 100% 失效
- 把 steps() 写成 steps(1) 或 ease，结果变成滑动而非打字
.typewriter {
overflow: hidden;
border-right: 1px solid #000;
white-space: nowrap;
display: inline-block;
width: 0;
animation: typing 3s steps(12, end), blink-caret .75s step-end infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #000 }
}中文、英文混排时 steps() 数值怎么定
不要数像素，要数“渲染可见的字符单位”。现代浏览器里，中英文、数字、常见标点（。！？，；：""''（））都占 1 个字符位置（即 1 个 steps 阶段）。但 emoji、全角空格、某些组合字符（如带音标的 ñ）可能占 2 个，需实测。
- 最稳妥做法：把文案贴进控制台跑
"你的文字".length，结果就是steps()的第一参数 - 如果文案动态加载，别硬编码
steps(N)，改用 JS 计算后注入 CSS 变量，例如style.setProperty('--step-count', text.length)，再在 CSS 里写steps(var(--step-count), end) - 用
ch单位替代%更可控，比如width: 0 → 20ch，前提是知道最大显示字符数
光标闪烁和动画结束后的状态容易被忽略
动画播完后，如果没处理，光标会消失或卡在半截位置。必须确保：
- @keyframes typing 的 to 帧宽度精确匹配内容（用 100% 前提是父容器足够宽且无 padding 干扰）
- 光标动画 blink-caret 的 animation-fill-mode 要设为 forwards，否则最后一帧透明边框会恢复
- 如果需要动画结束后保持光标，别用 infinite，改用 animation-iteration-count: 1 + 单独启一个只负责闪烁的动画
还有个隐藏坑：Chrome 115+ 对 steps() 在 subpixel 渲染下偶尔跳帧，若发现最后 1–2 个字闪一下才出现，把容器 font-size 设为整数值（如 16px 而非 1.2rem）能缓解。
立即学习“前端免费学习笔记（深入）”；
