CSS animation-iteration-count 定义了动画应该播放多少次。
它由两个值指定：数字和无穷大。
默认值为 1，但可以设置任何数字。
0 或者负值无效。
如果无限值设置动画，它将永远播放。
如果每次播放动画时都使用多个值，则使用列表的下一个值。
当为任何动画属性指定多个逗号分隔值时，它们将以不同的方式添加到动画名称中定义的动画。
animation-iteration-count 属性是 CSS3 属性之一。
| 初始值 | 1 |
|---|---|
| 应用于 | 所有元素，也适用于::before 和 ::after伪元素 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS3 |
| DOM 语法 | object.style.animationIterationCount=“infinite”； |
语法
animation-iteration-count: number | infinite | initial | inherit;
动画迭代计数属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
div {
position: relative;
width: 100px;
height: 100px;
margin: 30px 0;
border-radius: 50%;
animation-name: pulse;
}
.element-one {
background-color: #1c87c9;
animation-duration: 3s;
animation-iteration-count: 3;
}
.element-two {
margin: 0;
background-color: #83bf42;
animation-duration: 5s;
animation-iteration-count: 2;
}
@keyframes pulse {
0% {
left: 0;
}
50% {
left: 50%;
}
100% {
left: 0;
}
}
</style>
</head>
<body>
<h2> animation-iteration-count 示例</h2>
<p> animation-iteration-count 设置动画循环在停止之前应该播放的次数。</p>
<div class="element-one"></div>
<div class="element-two"></div>
</body>
</html>
具有 "infinite" 值的 animation-iteration-count 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
div {
position: relative;
width: 100px;
height: 100px;
margin: 30px 0;
border-radius: 50%;
animation-name: pulse;
}
.element-one {
background-color: #1c87c9;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.element-two {
margin: 0;
background-color: #83bf42;
animation-duration: 5s;
animation-iteration-count: 2;
}
@keyframes pulse {
0% {
left: 0;
}
50% {
left: 50%;
}
100% {
left: 0;
}
}
</style>
</head>
<body>
<h2>animation-iteration-count 示例</h2>
<p> animation-iteration-count 属性设置动画循环在停止之前应该播放的次数。</p>
<div class="element-one"></div>
<div class="element-two"></div>
</body>
</html>
CSS animation-iteration-count 属性值说明
| 值 | 说明 |
|---|---|
| number | 定义动画应播放的次数。默认值为1. |
| infinite | 动画将不停地播放。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
日期：2020-06-02 22:14:24 来源：oir作者：oir