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）或脱离文档流，也会中断动画
