逐字显示不可靠，应避免用 width + overflow: hidden；推荐用 steps() 配合字符级 span 动画或 background-clip + 渐变模拟打字效果，JS 拆字最稳妥。
用 width + overflow: hidden 做逐字显示不靠谱
直接对文字容器设 width 动画并配合 overflow: hidden，看似能“拉出”文字，但实际会把整行当一个块裁剪——中文里每个字宽度不等，英文还有连字、空格塌陷问题，width 变化根本无法对齐字边界。浏览器不会按字符切分渲染盒，所以你看到的不是“逐字”，而是“逐像素”模糊推进，尤其在缩放或不同字体下完全失准。
实操建议：
- 放弃用
width控制可见字符数，它不是字符计量单位 - 若坚持纯 CSS，必须依赖
ch单位（1ch≈ 当前字体中 “0” 的宽度），但仅适用于等宽字体，且需手动计算字数 ×ch - 更稳妥的做法是用
mask或clip-path配合steps()关键帧，但兼容性受限（mask在 Safari 旧版、IE 全挂）
@keyframes 配合 steps() 实现真·逐帧显字
核心思路是把文字每个字符单独包裹（如用 JS 拆成 <span>每</span><span>个</span><span>字</span>），再用 opacity 或 visibility 动画，靠 steps(总字数) 把动画切成离散步进，避免缓动插值。
示例关键代码：
立即学习“前端免费学习笔记（深入）”；
@keyframes reveal {
0% { opacity: 0; }
100% { opacity: 1; }
}
<p>.text span {
animation: reveal 2s steps(6, end) forwards;
opacity: 0;
}</p><p>/<em> 假设文字共6个字，第1个span延时0s，第2个延时2s/6，依此类推 </em>/
.text span:nth-child(1) { animation-delay: 0s; }
.text span:nth-child(2) { animation-delay: 0.333s; }
.text span:nth-child(3) { animation-delay: 0.666s; }
/<em> ...手动写或用 CSS 自定义属性 + calc() 简化 </em>/
注意点：
-
steps(6, end)中end表示在每步终点才跳变，避免首帧全显 - 动画时长必须与字数严格匹配，否则步长错位；推荐用 CSS 变量传入字数，再用
calc()算单字延迟 - 若用
visibility: hidden/visible替代opacity，需注意visibility不触发重绘，但无淡入效果
用 background-clip: text + linear-gradient 模拟“打字机”光标感
这个方案视觉上最接近终端打字效果：文字本身始终存在，但用渐变背景从左向右“扫过”，配合伪元素做闪烁光标。不依赖字符拆分，纯 CSS，兼容性较好（Chrome/Firefox/Safari 均支持 background-clip: text，Edge 17+）。
关键配置：
- 文字设
color: transparent，让内容不可见 - 用
background: linear-gradient(to right, #000 50%, transparent 50%)做扫描条 - 动画控制
background-size和background-position，使渐变带匀速横移 - 伪元素
::after绝对定位在末尾，设content: "|"+animation: blink 1s step-end infinite
性能提示：该方案触发的是合成层重绘，比 opacity 动画更轻量，但需确保父容器有 transform: translateZ(0) 或 will-change: background-position 启用 GPU 加速。
JS 辅助生成字符节点仍是生产环境首选
纯 CSS 方案要么兼容性差，要么要手算字数、写一堆 :nth-child，维护成本高。真实项目里，用几行 JS 拆字并注入 span 是最可控的——尤其当文字来自 CMS、API 或含 emoji、ZWJ 序列（如 ??）时，CSS 根本无法正确计数。
最小可行代码：
const el = document.querySelector('.typewriter');
const text = el.textContent;
el.innerHTML = text.split('').map(char => `<span>${char}</span>`).join('');
后续再用上面的 steps() 动画即可。重点在于：别为了“纯 CSS”硬扛，现代浏览器执行这段 JS 几乎无感知，而可维护性和准确性提升巨大。
容易被忽略的一点：中英文混排时，全角标点（，。！）和半角标点（, . !）在等宽字体下占位相同，但在比例字体下宽度差异大，此时用 ch 单位会偏移。唯一稳解，还是让 JS 按渲染后实际尺寸分段，或直接交由 steps() + 字符节点处理。
