steps() 是打字机效果的关键，因其用阶梯函数实现逐字分段渲染，避免插值模糊；需字符数匹配 steps(N, end) 的 N，end 防首帧闪烁；ch 单位配合 width 动画可精准逐字展开，但中英文混排时宜改用 transform: scaleX() 配合 steps()。
为什么 steps() 是打字机效果的关键
因为打字机效果本质是“逐字显示”，不是平滑过渡，而 animation-timing-function 默认的 cubic-bezier() 会插值，导致文字模糊或重叠。只有 steps(6, end) 这类阶梯函数能强制在指定步数内分段渲染，每步只显示前 N 个字符。
注意两个参数：steps(6, end) 中的 6 必须和文字总字符数一致（含空格），end 表示每步变化发生在该帧结束时——这是避免首字闪一下再开始的关键；用 start 会导致第一帧就显示全部字符。
如何用 ch 单位 + width 配合 steps() 实现逐字展开
核心思路：把文字容器设为 overflow: hidden，用 width 动画从 0ch 拉到 Nch（N 为字符数），再用 steps(N, end) 切割动画帧。
-
ch单位比em或像素更可靠——它基于当前字体的 “0” 字符宽度，等宽/非等宽字体下都能对齐字符边界 - 必须显式设置
white-space: nowrap，否则换行会破坏ch计算 - 动画时长建议 ≥
0.05s × 字符数，太快人眼无法识别“打字”过程；太慢则像卡顿 - 示例：6 字文本
"Hello!"对应width: 6ch，动画写成width 2.4s steps(6, end)
遇到中文或中英文混排时 ch 失效怎么办
ch 在多数中文字体里不准确（尤其非等宽字体），一个汉字可能占 1–2 个 ch 宽度，直接套用会导致提前截断或留白。此时应改用 transform: scaleX() 模拟裁剪：
- 容器设
overflow: hidden，子元素设display: inline-block和transform-origin: left - 动画控制
transform: scaleX(0)→scaleX(1)，配合steps(N, end) - 仍需手动数字符数填入
steps()参数，但视觉上更稳定 - 慎用
clip-path：Safari 对inset()的steps()支持差，且难以响应字体大小变化
实际项目中容易被忽略的兼容性与可访问性问题
这个效果在屏幕阅读器中默认会被朗读完整文本（因 DOM 未变化），但视觉上还没出现——用户听到内容却看不到，会造成困惑。
- 加
aria-live="polite"并配合 JS 动态更新aria-label是较稳妥方案，但增加复杂度 - CSS 动画在 iOS Safari 低版本（≤14.5）中，
steps()偶发跳帧，建议加@supports (animation-timing-function: steps(1, end))降级为淡入 - 不要在首屏关键文案上强依赖此效果——动画失败时至少保证文字可读（即不设
color: transparent等隐藏手段） - 如果文字含链接或按钮，确保整个区域始终可聚焦、可点击，别让
overflow: hidden剪掉交互热区
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
