纯css打字机效果的关键是steps()实现离散跳变而非连续过渡；需严格匹配字符数与steps参数，width+ch方案依赖等宽字体，clip-path更通用但同样要求步数精准，光标动画必须同步timing-function且共用时长。
纯 CSS 实现文字打字机效果，关键不是“过渡”，而是“跳变”——用 steps() 强制动画离散分帧，否则你会得到模糊拉伸的伪效果，而不是逐字敲击的机械感。
为什么不能用 ease 或 linear 做打字机动画
width 或 clip-path 动画若配 ease，浏览器会在每一帧插值渲染中间宽度，导致字符被横向拉伸、半显、甚至重叠；linear 虽匀速但仍是连续变化，视觉上像“文字从左往右滑出来”，完全失去打字节奏。只有 steps(N, end) 能让动画严格停在每一步终点，实现真正“一格一字符”的硬切。
-
steps(10, end)表示整个动画时长被切成 10 等份，第 10 帧才完整显示第 10 个字符 - 少写一个字符（比如文本 12 字却写
steps(11, end)），最后一字永远不出现 - 漏掉
end参数（如只写steps(12)），部分浏览器按start处理，首帧空白，光标先闪再出字
width + ch 是最稳的方案，但有硬前提
适合英文、数字、符号为主的单行文案，依赖等宽字体度量。它不靠 JS 计算像素，而是用 ch 单位（一个 “0” 字的宽度）锚定每个字符占位。
- 容器必须设
font-family: monospace或明确等宽字体（如Consolas, "Courier New", monospace） - 元素需为
display: inline-block或block，inline默认不响应width - 必须加
white-space: nowrap，否则空格或连字符可能提前折行，破坏ch累加逻辑 - 动画终点写成
width: 12ch（假设 12 字符），不能写100%或fit-content—— 后者无法与steps()对齐帧
clip-path 更通用，但要注意字符数精度
对中英文混排、非等宽字体、Emoji 更友好，原理是用 inset(0 X% 0 0) 从右往左逐步“揭开”文字。但它同样极度依赖字符数与 steps() 参数严格一致。
- 中文、标点、空格都算 1 步，
"你好！"是 4 步，不是 2 步 - 动画必须从
clip-path: inset(0 100% 0 0)开始，到inset(0 0 0 0)结束 - 别用
clip-path: polygon()或path()—— Safari 和旧版 Chrome 对它们的steps()支持不稳定 - 光标动画（如
border-right）必须复用同一animation-timing-function，例如也用step-end，否则会“光标跑得比字快”
光标闪烁不同步？大概率是 timing-function 没对齐
很多人单独写一个 @keyframes blink 配 ease-in-out，结果光标在字还没打完时就开始狂闪，或者卡在最后一帧不动。这不是 bug，是 timing 函数没统一。
- 打字动画用
steps(12, end)，光标动画就必须用step-end（等价于steps(1, end)） - 两个动画要共用同一总时长，比如打字 3s，光标就该
animation: blink 3s step-end infinite，不能写0.75s单独循环 - 如果光标用
::after实现，确保其content为空且position: absolute，否则可能影响父容器布局重排
最易被忽略的一点：所有方案都默认文本内容静态写死。一旦你用 JS 动态改 textContent，CSS 动画不会自动重置帧数——必须手动触发 animation: none 再恢复，或用自定义属性（如 --char-count）联动重算。这一步，90% 的线上项目都漏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
