如何让 CSS3 动画无限循环？

无限循环 CSS3 动画

CSS3 动画提供了一种在网页上对元素进行动画处理的便捷方法。但是，默认情况下，这些动画仅播放一次。要让动画连续循环，我们需要使用特定的 CSS 属性。

挑战

您希望让一系列图像连续淡入和淡出，而无需重新加载页面。

解决方案

CSS3动画实现无限循环的关键在于animation-iteration-count属性。该属性指定动画在停止之前重复的次数。通过将此属性设置为无限，我们可以告诉浏览器无限期地运行动画。

在您提供的代码中，您已经使用 CSS 类定义了多个图像容器。要启用连续循环，请将以下行添加到每个图像的 CSS 规则中：

animation-iteration-count: infinite;

这是添加属性的更新后的 CSS：

.photo1 {
  opacity: 0;
  animation: fadeinphoto 7s 1 infinite;
  ...
}

.photo2 {
  opacity: 0;
  animation: fadeinphoto 7s 5s infinite;
  ...
}

...

通过设置动画迭代-将每个图像计数为无限，您就可以确保淡入动画将无限重复，在图像之间无缝过渡而不会出现任何中断。这将产生连续循环动画的错觉。

以上是如何让 CSS3 动画无限循环？的详细内容。更多信息请关注PHP中文网其他相关文章！