如何在CSS动画中循环？

在CSS动画中实现循环有多种方法，以下是其中几种常用的方式：

使用animation-iteration-count属性：通过设置animation-iteration-count属性的值为"infinite"，可以使动画无限循环播放。例如：

@keyframes myAnimation {
  0% { /* 初始状态 */ }
  100% { /* 结束状态 */ }
}

.element {
  animation-name: myAnimation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

使用animation属性的关键帧百分比：在关键帧中使用百分比来定义动画的状态，通过将最后一个关键帧的百分比设置为100%并重复第一个关键帧的状态，可以实现循环效果。例如：

@keyframes myAnimation {
  0% { /* 初始状态 */ }
  50% { /* 中间状态 */ }
  100% { /* 结束状态，与初始状态相同 */ }
}

.element {
  animation-name: myAnimation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

使用animationend事件：通过监听animationend事件，在动画结束时重新触发动画，从而实现循环效果。例如：

@keyframes myAnimation {
  0% { /* 初始状态 */ }
  100% { /* 结束状态 */ }
}

.element {
  animation-name: myAnimation;
  animation-duration: 2s;
}

.element.addEventListener('animationend', function() {
  this.style.animation = 'none';
  this.offsetHeight; /* 强制重绘，使动画重新触发 */
  this.style.animation = '';
});

这些方法可以根据具体的需求选择使用，实现CSS动画的循环效果。对于更复杂的动画需求，可以结合使用CSS动画和JavaScript来实现。