本文详解如何修复 CSS 打字动画无法无限循环的问题，并消除结尾卡顿现象，通过正确设置 animation 简写属性、调整关键帧逻辑与添加 steps() 缓动函数，实现流畅、可复用的无限打字效果。
本文详解如何修复 css 打字动画无法无限循环的问题，并消除结尾卡顿现象，通过正确设置 `animation` 简写属性、调整关键帧逻辑与添加 `steps()` 缓动函数，实现流畅、可复用的无限打字效果。
要实现真正流畅、无限循环的 CSS 打字动画（Typing Text Animation），仅添加 animation-iteration-count: infinite 是不够的——因为当使用 animation 简写属性时，它会完全覆盖之前单独声明的 animation-iteration-count、animation-timing-function 等值，重置为浏览器默认（如 iteration-count: 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(40, end) infinite;
width: 0;
}⚠️ 关键改进说明：
- steps(40, end)：替代默认的 ease 或 linear，强制动画以「逐字符」方式分步渲染（40 为近似字符数，可根据实际文本长度微调），彻底解决“结尾明显减速/停顿”的视觉卡顿问题；
- 移除冗余声明：删除孤立的 animation-iteration-count: infinite，避免被简写覆盖；
- forwards 可选但非必需：若需保持最终态（如光标停留），保留 forwards；但无限循环下，forwards 与 infinite 存在语义冲突（动画无终态），建议移除 forwards，改用 border-right 配合 animation-direction: normal 自然维持光标效果；
- RTL 兼容性注意：你的 HTML 含 dir="rtl"，若文本为阿拉伯语/希伯来语等，需确保容器 direction: rtl 且 text-align: right，同时 width 动画方向仍适用（因 width 是尺寸属性，不受文本方向影响）；但更健壮方案是改用 ch 单位或 max-width + clip-path 实现 RTL 安全的打字效果（进阶可选）。
? 完整可运行示例（精简版）：
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html>
<html dir="rtl" lang="en">
<head>
<meta charset="UTF-8">
<title>无限打字动画</title>
<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;
width: 0;
animation: typing 4s steps(32, end) infinite; /* 32≈文本字符数 */
font-family: 'Dosis', sans-serif;
/* 可选：添加轻微延迟让光标更自然 */
animation-delay: 0.5s;
}
</style>
</head>
<body>
<div class="container d-flex justify-content-center align-items-center">
<h2 class="typed-out">مرحباً بك في الموقع</h2>
</div>
</body>
</html>? 总结要点：
- ✅ animation 简写必须包含 infinite，不可拆分声明；
- ✅ 用 steps(N, end) 替代 linear 消除减速拖尾，N 建议设为文本字符数 ±2；
- ✅ 避免 forwards 与 infinite 同时使用；
- ✅ RTL 场景下优先测试实际字体渲染，必要时改用 clip-path: inset(0 100% 0 0) + width 动画增强兼容性。
这样即可获得专业级、零卡顿、无限循环的 CSS 打字动画效果。
