CSS3 animation-iteration-count 属性
CSS3 animation-iteration-count 属性
CSS3 animation-iteration-count 属性用于控制CSS动画的循环次数。通过设置该属性的值，可以确定动画循环的次数，从而控制动画播放的次数。
语法
animation-iteration-count: number | infinite | initial | inherit;
其中，
- number：表示动画循环的次数，可以为整数或小数。
- infinite：表示动画将无限循环。
- initial：表示将属性设置为默认值。
- inherit：表示从父元素继承该属性。
注意，该属性定义在 keyframes 语句中会覆盖 animation 属性中设置的循环次数。
使用示例
设置动画只播放一次
div {
animation-name: example;
animation-duration: 2s;
animation-iteration-count: 1;
}
@keyframes example {
0% {background-color: red;}
100% {background-color: yellow;}
}
上述示例中，设置 animation-iteration-count 属性为 1，意味着动画只播放一次。
使用 infinite 无限循环播放动画
div {
animation-name: example;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes example {
0% {background-color: red;}
50% {background-color: yellow;}
100% {background-color: blue;}
}
上述示例中，将 animation-iteration-count 属性设置为 infinite，表示动画将无限循环播放。
从父元素继承 iteration-count 属性
.parent {
animation-name: example;
animation-duration: 2s;
animation-iteration-count: 3;
}
.child {
animation-name: child-example;
animation-duration: 1s;
animation-iteration-count: inherit; /* 从父元素继承 */
}
@keyframes example {
0% {background-color: red;}
50% {background-color: yellow;}
100% {background-color: blue;}
}
@keyframes child-example {
0% {opacity: 0;}
100% {opacity: 1;}
}
上述示例中，通过设置 animation-iteration-count 属性为 inherit，使 .child 元素从其父元素 .parent 中继承该属性。
总结
CSS3 animation-iteration-count 属性用于控制动画循环的次数。值得注意的是，该属性定义在 keyframes 语句中会覆盖 animation 属性中设置的循环次数。此外，还可以通过设置 infinite 值来实现动画的无限循环播放，以及通过 initial 和 inherit 值来重置或从父元素继承该属性。