CSS3 提供了
animation属性来制作动画。这个属性有许多不同的值，其中包括
animation-iteration-count。这个值控制动画循环次数。默认情况下该值为 1，表示动画只会运行一次。但如果大家将它设置为
infinite，动画就会无限循环播放。
.box {
animation-name: slideAnimation;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes slideAnimation {
0% {
transform: translateX(0);
}
100% {
transform: translateX(200px);
}
}上述代码中，大家创建了一个名为
slideAnimation的动画，并将其绑定到一个类名为
.box的 HTML 元素上。动画的持续时间为 2 秒，循环次数被设置为无限。在
@keyframes中，大家定义了动画的起始和结束状态，通过对
translateX属性进行变换来实现元素在水平方向上的位移。
当页面加载时，
.box元素将无限次地执行这个动画，直到页面被关闭。
除了使用
animation-iteration-count来实现动画循环播放，大家还可以使用 JavaScript 来控制它。例如，大家可以在动画完成后立即重新开始它：
var box = document.querySelector('.box');
box.addEventListener('animationend', function () {
box.classList.remove('slide');
void box.offsetWidth;
box.classList.add('slide');
});这段代码中，大家向
.box元素添加了一个事件监听器，当动画结束时就执行重新开始动画的代码。这个方法先将
slide类名从元素上移除，再重新添加它，这样就会触发 CSS3 动画重新开始。
在实现动画循环播放时，大家应该注意一些问题。首先是性能问题，过多的 CSS3 动画可能会导致浏览器的卡顿。其次，动画循环播放可能对用户造成干扰，应该谨慎使用。最后，需要仔细处理动画结束时的效果，以免出现不必要的反弹或闪烁。