17370845950

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 控制）
• 确保动画不会引起眩晕或干扰主要内容

基本上就这些。只要设置 animation-iteration-count: infinite 或简写在 animation 属性中，动画就会持续播放。