CSS动画默认只执行一次，因animation-iteration-count默认值为1；设为infinite可无限循环，配合alternate等direction值可实现平滑往返，需注意fill-mode、play-state等属性干扰。

CSS动画执行一次就停止，是因为默认的 animation-iteration-count 值是 1。想让动画重复播放，只需显式设置该属性即可。

设置 animation-iteration-count 为 infinite

这是最常用的方式，让动画无限循环播放：

• 在 CSS 中添加 animation-iteration-count: infinite;
• 也可以简写在 animation 复合属性里，例如：
  animation: slide 2s ease-in-out infinite;
• 注意：如果动画本身有 animation-fill-mode（比如设为 forwards），即使设了 infinite，视觉上也可能“卡住”，需确认是否误用了填充模式

指定具体重复次数

若只需播放固定次数（如 3 次、5 次），直接写数字：

• animation-iteration-count: 3;
• 支持小数，例如 2.5 表示完整播 2 次 + 半次（停在中间状态）
• 值为 0 或负数时，动画不执行

配合 animation-direction 控制来回播放

单次播放后停止，有时其实是方向问题。可结合 animation-direction 实现更自然的循环：

• animation-direction: alternate;：奇数次正向，偶数次反向（适合呼吸、摇摆类效果）
• animation-direction: alternate-reverse;：首次反向，之后交替
• 常与 infinite 搭配使用，避免生硬跳回起点

检查是否有其他属性干扰循环

即使设置了 infinite，动画仍只播一次？可能是以下原因：

• animation-play-state: paused; —— 确保不是被暂停了
• animation-fill-mode: forwards; —— 这会让动画停在最后一帧，掩盖了重复行为；如需循环，建议用 none 或 backwards
• 动画时长（animation-duration）为 0s 或无效值，会导致无实际播放
• 元素被移除、隐藏（display: none）或脱离文档流，也会中断动画