animation-iteration-count是控制CSS动画播放次数的属性，默认值为1，即播放一次后停止；若要动画循环播放，需将其设置为infinite；常见问题包括未设置该属性、拼写错误、样式被覆盖或元素被移除等，正确使用可确保动画持续循环。
HTML中插入的CSS动画不循环，通常是因为animation-iteration-count属性设置不正确或未设置。这个属性控制动画执行的次数，默认值是1，意味着动画只播放一次，播放结束后就停止，不会自动重复。
animation-iteration-count 是什么？
它是CSS动画的一个关键属性，用于定义动画应重复播放多少次。
常见取值包括：
-
1：播放一次（默认） -
2、3等数字：指定播放次数 -
infinite：无限循环播放
为什么动画不循环？
如果动画没有循环，可能是以下原因导致：
立即学习“前端免费学习笔记（深入）”；
- 未设置
animation-iteration-count: infinite; - 设置了具体的次数如
1或2，但期望一直播放 - CSS优先级问题导致样式未生效
- 拼写错误，比如写成
iterationcount或interation-count
如何让动画循环播放？
只需在CSS动画规则中添加animation-iteration-count: infinite;即可。
示例代码：
@keyframes example {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.animate {
animation-name: example;
animation-duration: 2s;
animation-iteration-count: infinite; / 关键：让动画无限循环 /
}
也可以简写为：
.animate {
animation: example 2s infinite;
}
注意事项
确保以下几点避免动画不循环：
- 检查是否拼错属性名
- 确认没有其他样式覆盖了该属性
- 若使用JavaScript动态添加类，确保类名正确绑定动画样式
- 某些情况下，元素在动画完成后被隐藏或移除，也会导致“看似”没循环
基本上就这些。只要把animation-iteration-count设为infinite，动画就能持续循环播放。不复杂但容易忽略。
