如何在 CSS 中永远为图片制作动画

在本文中，我们将解决围绕 CSS3 动画的一个常见问题：让它们无限期地运行。

挑战

假设您有一系列照片想要以幻灯片形式显示，并使用 CSS3 在它们之间平滑过渡 动画片。但是，您对默认行为不满意，即最后一张照片淡出并重新加载页面，从而有效地重新启动幻灯片放映。

解决方案

要实现无缝循环动画，我们需要修改 CSS 以指定动画应连续迭代。默认情况下，CSS 动画设置为仅运行一次。

我们将添加到 CSS 的关键属性是 animation-iteration-count。这是一个例子：

@keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-moz-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-webkit-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-o-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.photo1 {
  opacity: 0;
  animation: fadeinphoto 7s 1;
  animation-iteration-count: infinite;
  -moz-animation: fadeinphoto 7s 1;
  -webkit-animation: fadeinphoto 7s 1;
  -o-animation: fadeinphoto 7s 1;
}

通过将 animation-iteration-count 设置为 无限，动画将继续无限循环，在照片之间创建无缝过渡。