animation-iteration-count

The animation-iteration-count CSS 属性设置动画序列在停止之前应播放的次数。

试用

使用速记属性 animation 一次设置所有动画属性通常很方便。

语法

css
/* Keyword value */
animation-iteration-count: infinite;

/* <number> values */
animation-iteration-count: 3;
animation-iteration-count: 2.4;

/* Multiple values */
animation-iteration-count: 2, 0, infinite;

/* Global values */
animation-iteration-count: inherit;
animation-iteration-count: initial;
animation-iteration-count: revert;
animation-iteration-count: revert-layer;
animation-iteration-count: unset;

The animation-iteration-count 属性被指定为一个或多个用逗号分隔的值。

Values

infinite

动画将无限重复。

<number>

动画将重复的次数；默认值为 1。你可以指定非整数的值来播放部分动画周期：例如，0.5 将播放一半的动画周期。负值无效。

注意：当你为 animation-* 属性指定多个用逗号分隔的值时，它们将按 animation-names 出现的顺序应用于动画。对于动画数量和 animation-* 属性值不匹配的情况，请参见 设置多个动画属性值.

注意：当创建 CSS 滚动驱动的动画 时，指定 animation-iteration-count 会导致动画在时间轴的进程中重复指定的次数。如果没有提供 animation-iteration-count，动画只会发生一次。infinite 是滚动驱动的动画的有效值，但它会导致动画无法工作。

正式定义

初始值1
应用于所有元素，包括 ::before 和 ::after 伪元素
继承否
计算值按指定值
动画类型不可动画

正式语法

animation-iteration-count = 
  <single-animation-iteration-count>#  

<single-animation-iteration-count> = 
  infinite        |
  <number [0,∞]>

示例

设置迭代次数

此动画将运行 10 次。

HTML

html
<div class="box"></div>

CSS

css
.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-iteration-count: 10;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

结果

将鼠标悬停在矩形上以启动动画。

查看 CSS 动画 以获取示例。

规范

规范
CSS 动画级别 1
# animation-iteration-count

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅