Style animationIterationCount 属性
在 CSS3 中，我们可以通过 animationIterationCount 属性来指定动画播放的次数。这个属性可以接受一个数字值或者 infinite 关键字作为参数，用来表示动画播放的次数。
语法
-------------------------- -- - ---------
- 数值：表示动画播放的次数，可以是整数或者小数，如果是小数则会被四舍五入为整数。
- infinite：表示动画会无限循环播放。
示例
---------- ------- - -- - ----------------- ---- - --- - ----------------- ----- - ---- - ----------------- ------ - - --- - ------ ------ ------- ------ ----------------- ---- --------------- -------- ------------------- --- -------------------------- -- -
上面的示例代码定义了一个名为 example 的动画，它会让一个 div 元素在 3 秒内从红色变为蓝色再变为绿色，然后循环播放两次。如果将 animation-iteration-count 设置为 infinite，则动画会永远循环播放。
注意事项
- 如果动画的播放次数是小数，那么它会被四舍五入为整数。
- 如果动画的播放次数是负数或者 0，则动画不会被播放。
- 如果同时设置了 animation-iteration-count 和 animation-direction 属性，那么动画会按照指定的次数和方向播放。
通过合理地运用 animationIterationCount 属性，我们可以实现各种炫酷的动画效果，为网页增添更多的交互和视觉吸引力。