CSS 动画无限循环 - CSS

CSS 动画是网站设计中非常常见的元素，可以使页面更具动感和活力。动画循环是一种非常常见的功能，可以让动画一直播放。

在 CSS 中实现动画无限循环有几种方法，下面将为您介绍其中的几种。

方法一

使用 animation-iteration-count 属性来指定动画循环的次数。将其设置为 infinite，即可让动画无限循环。

@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}

div {
  animation-name: example;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

方法二

使用关键字 infinite 简写属性 animation，即可实现动画无限循环。

@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}

div {
  animation: example 2s infinite;
}

方法三

在动画结束后，使用 animationend 事件来重新触发动画，从而实现动画无限循环。

@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}

div {
  animation-name: example;
  animation-duration: 2s;
  animation-iteration-count: 1;
}

div:hover {
  animation-iteration-count: infinite;
}

div.addEventListener('animationend', () => {
  div.classList.remove('replay-animation');
  void div.offsetWidth;
  div.classList.add('replay-animation');
});

以上是实现 CSS 动画无限循环的三种方法，我们可以根据实际需求来选择相应的方法。