如何在CSS动画中循环？

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

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

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

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

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

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

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