css中的animation-iteration-count属性怎么用

# CSS中的animation-iteration-count属性怎么用

在CSS动画中，控制动画播放次数是一个常见的需求。`animation-iteration-count`属性正是用来实现这一功能的关键属性。本文将详细介绍该属性的用法、取值、应用场景及注意事项。

---

## 一、animation-iteration-count属性概述

`animation-iteration-count`用于定义动画播放的次数，是CSS动画模块（CSS Animations Module Level 1）的标准属性之一。其默认值为`1`，即动画仅播放一次。

### 基本语法
```css
.element {
  animation-iteration-count: <value>;
}

二、属性取值详解

1. 数值

• 正整数：指定动画播放的具体次数（如2表示播放两次）。
• 小数：允许非整数次数（如1.5表示播放1.5次，但部分浏览器可能截断为整数）。

.example {
  animation-iteration-count: 3; /* 播放3次 */
}

2. 关键字

• infinite：动画无限循环播放。

.example {
  animation-iteration-count: infinite; /* 无限循环 */
}

3. 多个值（多动画场景）

若元素应用了多个动画（通过逗号分隔），可以为每个动画单独设置播放次数：

.example {
  animation-name: fade, rotate;
  animation-iteration-count: 2, infinite; /* fade播放2次，rotate无限循环 */
}

三、实际应用示例

示例1：按钮悬停脉冲效果

.button {
  animation: pulse 1s ease-in-out;
  animation-iteration-count: 3;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

效果：按钮悬停时脉冲放大3次后停止。

示例2：无限旋转的加载图标

.loader {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

效果：图标持续旋转，直到页面关闭。

四、与其他动画属性的协作

animation-iteration-count需与其他动画属性配合使用，常见组合包括：

完整示例：

.box {
  animation-name: slide;
  animation-duration: 1s;
  animation-delay: 0.5s;
  animation-iteration-count: 4;
  animation-fill-mode: forwards;
}

五、常见问题与注意事项

1. 浏览器兼容性

• 所有现代浏览器均支持该属性（Chrome、Firefox、Safari、Edge）。
• 旧版IE（≤9）需使用-ms-前缀（但IE10+已无需前缀）。

2. 性能优化

• 避免滥用infinite：无限循环动画可能增加CPU/GPU负载。
• 使用will-change优化：对高频动画元素添加will-change: transform;。

3. 与JavaScript的交互

可通过JavaScript动态修改播放次数：

document.querySelector('.element').style.animationIterationCount = '5';

六、总结

animation-iteration-count是控制CSS动画播放次数的核心属性，通过合理设置数值或infinite关键字，可以实现从单次触发到无限循环的多样化效果。结合其他动画属性，能够轻松实现复杂的交互体验。在实际开发中，需注意性能影响和浏览器兼容性，必要时通过JavaScript动态调整参数以满足业务需求。

扩展阅读
- MDN文档：animation-iteration-count
- CSS动画性能优化指南 “`