CSS 打字动画无限循环与性能优化教程-html教程-PHP中文网

CSS 打字动画无限循环与性能优化教程

本文详解如何修复 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;
}

⚠️ 关键改进说明：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

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 安全的打字效果（进阶可选）。

? 完整可运行示例（精简版）：



  <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><div class="container d-flex justify-content-center align-items-center">
    <h2 class="typed-out">مرحباً بك في الموقع</h2>
  </div>

? 总结要点：