animation-iteration-count仅控制播放次数，平滑反向需配合animation-direction: alternate及infinite，并确保关键帧对称、fill-mode合理、所有属性统一简写。

animation-iteration-count 本身不负责反向，它只管“播几次”。想平滑反向循环，必须配合 animation-direction，否则它永远只会正向播完就跳回起点。

---

animation-direction: alternate 必须和 infinite 或数字一起用

• 单独写 animation-direction: alternate 没效果，因为默认 animation-iteration-count: 1，只播一次正向，根本没机会“交替”

• 正确写法是：
  animation: typing 3s steps(1, end) infinite;
  再加一行 animation-direction: alternate;
  或更稳妥地合并进简写：
  animation: typing 3s steps(1, end) infinite alternate;

• 注意顺序：infinite 和 alternate 都是 animation 简写的合法值，但位置靠后不会覆盖前面——只要都写进去就行

---

反向时关键帧会“倒着读”，但起止状态要对称

• 当 animation-direction: alternate 生效后，第2轮播放会把 @keyframes 的 0% 当作终点、100% 当作起点

  立即学习“前端免费学习笔记（深入）”；

  

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

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

  下载

• 如果你写的是：

  @keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
  }

  那第2轮就是从 100px → 0，视觉上是平滑退回

• 容易踩的坑：

  • 0% 和 100% 设置了不同 opacity 或 visibility，反向时会出现闪动或跳变
  • 用了 animation-fill-mode: forwards，动画停在最后一帧后，再进反向轮会先“跳回” 0%，破坏连贯性；建议设为 none 或 backwards

---

animation 简写会重置所有子属性，infinite 漏写就等于没写

• 这是最常被忽略的失效原因
  错误示范：

  .text {
  animation-iteration-count: infinite;
  animation: typing 2.5s steps(1, end);
  }

  后面那行 animation 简写会把 iteration-count 重置为 1，动画只跑一遍

• 正确做法只有两种：

  • 所有参数写进一个 animation 简写里（推荐）
    animation: typing 2.5s steps(1, end) infinite alternate;
  • 或者完全不用简写，每一项单独声明，且确保 animation 不出现（风险高，易遗漏）

---

真正影响“是否平滑”的不是 animation-iteration-count，而是关键帧设计、缓动函数、animation-fill-mode 和 animation-direction 四者的配合。其中 animation-iteration-count: infinite 只是让这个配合有机会持续发生——它自己从不参与方向或过渡逻辑。