本文详解如何通过 CSS 实现无限循环的打字效果，并解决动画末尾卡顿问题，重点修正 animation 属性覆盖 animation-iteration-count 的常见错误，同时优化关键帧时序以确保节奏均匀。
本文详解如何通过 css 实现无限循环的打字效果，并解决动画末尾卡顿问题，重点修正 `animation` 属性覆盖 `animation-iteration-count` 的常见错误，同时优化关键帧时序以确保节奏均匀。
要实现真正平滑、无限循环的 CSS 打字动画，需同时解决两个核心问题：动画无法循环和结尾明显减速/停顿。根本原因在于 CSS 动画声明的优先级与关键帧设计逻辑。
✅ 正确写法：合并动画属性，避免覆盖
原始代码中单独设置 animation-iteration-count: infinite 是无效的，因为后续的 animation 简写属性（如 animation: typing 5s forwards）会完全重置所有子属性，包括迭代次数，默认为 1。正确做法是将 infinite 直接写入 animation 简写中：
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
.typed-out {
overflow: hidden;
border-right: 0.15em solid #990000;
white-space: nowrap;
font-family: 'Dosis', sans-serif;
/* ✅ 关键：infinite 必须放在 animation 简写中 */
animation: typing 5s steps(30, end) forwards infinite;
width: 0;
}? steps(30, end) 是关键优化：它将动画划分为 30 个等距阶跃（step），模拟逐字输入效果，避免 from→to 线性插值导致的末尾“拖尾”或视觉减速。end 表示在每步结束时跳变，更符合打字节奏。
? 完整 HTML + CSS 示例（可直接运行）
<!DOCTYPE html>
<html dir="rtl" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Typing Animation Infinite</title>
<link href="https://fonts.googleapis.com/css?family=Dosis&display=swap" rel="stylesheet">
<style>
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
.typed-out {
display: inline-block;
overflow: hidden;
border-right: 0.15em solid #990000;
white-space: nowrap;
font-family: 'Dosis', sans-serif;
font-size: 1.8rem;
/* 使用 steps() + infinite 实现流畅循环 */
animation: typing 4s steps(25, end) forwards infinite;
width: 0;
}
</style>
</head>
<body>
<div class="container d-flex justify-content-center align-items-center vh-100">
<h2 class="typed-out">This is a Typing Text</h2>
</div>
</body>
</html>⚠️ 注意事项与进阶建议
- steps() 参数调整：steps(N, end) 中的 N 应大致匹配文本字符数（含空格）。例如 25 字符推荐 steps(25, end)；过少会导致跳跃感，过多则接近线性，失去打字感。
- 重置动画起点：无限循环时，若希望每次从头开始（而非“擦除→重打”），需在 to 关键帧后添加一个短暂的 opacity: 0 或 width: 0 回退阶段，但本例采用纯正向打字循环，无需回退。
- RTL 兼容性：因页面设为 dir="rtl"，确保容器宽度计算与文本流方向一致；若实际内容为 LTR，建议移除 dir="rtl" 或显式设置 direction: ltr。
- 性能提示：避免对 width 动画频繁重排（reflow），如需更高性能，可改用 transform: scaleX() 配合 overflow: hidden，但需配合 transform-origin 调整起始点。
掌握 animation 简写语法优先级与 steps() 函数的精准应用，即可轻松构建专业级、无限循环且节奏稳定的 CSS 打字动画。
立即学习“前端免费学习笔记（深入）”；
