animation-iteration-count: infinite 用于让动画无限循环。需配合 @keyframes 定义动画帧，并通过 animation 属性应用到元素，如 .element { animation: example 2s infinite; }。示例中盒子每1.5秒左右移动并持续重复，常用于加载旋转、呼吸效果等UI动效。实际使用时应注意性能，避免大量复杂动画影响流畅度，可通过 Intersection Observer 在不可见时暂停以优化体验。
CSS 中的 animation-iteration-count: infinite 用于让动画无限次循环播放。它常配合 @keyframes 和其他动画属性一起使用，使元素的动画持续不断地运行。
基本语法
animation-iteration-count 属性定义动画执行的次数。设置为 infinite 时，动画会一直重复播放。常用写法如下：
.element {
animation-name: example;
animation-duration: 2s;
animation-iteration-count: infinite;
}
也可以简写在 animation 复合属性中：
.element {
animation: example 2s infinite;
}
配合 @keyframes 使用
必须先定义一个关键帧动画（@keyframes），然后将其绑定到目标元素上。示例：让一个 div 左右移动
立即学习“前端免费学习笔记（深入）”；
@keyframes moveSide {
0% { transform: translateX(0); }
50% { transform: translateX(100px); }
100% { transform: translateX(0); }
}
.box {
width: 50px;
height: 50px;
background: blue;
animation: moveSide 1.5s infinite;
}
这个盒子会每 1.5 秒完成一次左右移动，并且不断重复。
实际应用场景
infinite 常用于需要持续动画效果的 UI 元素，比如：- 加载动画（loading spinner）
- 呼吸效果（如亮度或大小轻微变化）
- 滚动提示箭头
- 悬浮按钮微动效
例如做一个旋转的加载图标：
.loader {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
注意事项
虽然 infinite 很方便，但要注意性能和用户体验：- 避免在大量元素上同时使用复杂无限动画，可能影响页面流畅度
- 可考虑在用户不可见时暂停动画（如通过 Intersection Observer 控制）
- 确保动画不会引起眩晕或干扰主要内容
