纯 css 实现无限循环“打字+删减”效果的可靠方法是单向 steps() 动画配两段关键帧，而非用 animation-direction: alternate；因 alternate 会破坏 steps() 的离散步进逻辑，导致删减时字符跳变或空白帧。
直接说结论：纯 CSS 实现无限循环的“打字 + 删减”效果，animation-direction: alternate 本身不适用于 steps() 关键帧动画——它会让步进逻辑错乱，导致字符跳变或卡顿。真正可靠的做法是用单向 steps() 动画 + 两段关键帧（打字段 + 删减段），配合 animation-iteration-count: infinite 和精确的时间分割。
为什么 animation-direction: alternate 和 steps() 一起用会出问题
steps() 的本质是把动画过程切成离散帧，靠 animation-timing-function 控制“在哪一刻切”。而 alternate 会让动画在第 2 轮反向执行——但反向时，steps(5, end) 不会自动变成 steps(5, start)，浏览器仍按原步进逻辑倒放，导致字符不是逐个消失，而是从中间突然截断、顺序错乱，甚至出现空白帧。
常见错误现象：Uncaught DOMException: Failed to execute 'animate' on 'Element' 不会出现，但视觉上表现为：第二轮开始后，文字“啪”一下全空，或删减时跳着少两个字再少一个。
- 使用场景：需要在 banner、hero 区域展示动态 slogan，如 “Frontend → Fullstack → Designer” 循环切换
- 性能影响：纯 CSS 动画无重排，但若文本过长（>20 字）+ 步数过多（>30），部分低端安卓 WebView 可能掉帧
- 兼容性：Chrome 43+/Firefox 36+/Safari 9+ 支持
steps()；IE 完全不支持，需降级为 opacity 淡入淡出
正确写法：双段式 steps() 关键帧 + 精确时间分配
核心思路：把整个周期拆成「打字」和「删减」两段，各自用独立的 steps() 控制，总时长固定，用 % 明确每段占比。例如 4 秒周期中，前 60% 打字（2.4s），后 40% 删减（1.6s）。
code {
animation: type-delete 4s steps(12, end) infinite;
}
@keyframes type-delete {
0% { width: 0; }
50% { width: 12ch; } /* 打字完成 */
50.01% { width: 12ch; } /* 防止删减段起始跳动 */
100% { width: 0; }
}
注意：steps(12, end) 中的 12 必须等于目标文本的字符数（中文/英文/符号均计为 1）。如果文本含空格或 emoji，需手动统计（emoji 多数为 1 个 Unicode 码点，但某些组合如 ?? 算 2+ 码点，建议用 '??'.length 在控制台验证）。
- 参数差异：
steps(N, start)在每段动画开始时立即显示第一步，适合“删减”段开头保持完整；steps(N, end)更自然，适合“打字”段，最后一帧才完整呈现 - 容易踩的坑：没加
50.01%过渡帧，导致删减段从width: 0开始，第一帧就消失；或steps()数值与字符数不一致，造成最后一个字永远不出现
如何支持多行文本或不同长度字符串轮播
纯 CSS 无法动态读取文本长度，所以多字符串轮播必须预设最长字符串的 ch 值，并统一用该宽度做动画基准，否则换词时会抖动。
例如轮播三句：“Hi”、“Hello World”、“CSS is fun”，最长为 11 字符，则全部按 width: 11ch 设定，短文本靠 text-align: left 和容器 overflow: hidden 隐藏多余空白。
- 使用场景：运营后台配置 slogan 列表，前端需兼容不定长文案
- 实操建议：用 JS 预计算最大长度并注入 CSS 自定义属性，如
:root { --max-ch: 11; }，然后关键帧中用width: var(--max-ch)ch - 替代方案：若必须严格按各字符串自身长度动画，只能用 JS 驱动
el.textContent+requestAnimationFrame，CSS 仅负责光标 blink
最易被忽略的一点：字体度量会影响 ch 单位精度——等宽字体（如 font-family: monospace）下 1ch ≈ 1 字符宽度，但非等宽字体（如 system-ui）中，i 和 w 宽度差可能达 2×，此时应改用 em 或固定 px 宽度，并用 letter-spacing 微调对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
