html - 简单的 CSS 幻灯片卡在最后 3 张图像上

Question

我尝试为某人创建一个非常简单的自动滚动图片库，虽然它确实起作用，但它只在第一次循环后旋转最后 3 张图片，我不知道为什么。任何帮助将不胜感激！

*注意：我试图实现这个幻灯片的系统利用网页设计的模板主题，所以我无法访问/编辑/等任何外部 .css 文件。几乎所有东西都必须内联构建。

@keyframes fade {
  0% {
    opacity: 0;
  }
  11.11% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  44.44% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.projectslideshow {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.projectslideshow img {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  animation-name: fade;
  animation-duration: 9s;
  animation-iteration-count: infinite;
}

.projectslideshow img:nth-child(1) {
  animation-delay: 0s;
}

.projectslideshow img:nth-child(2) {
  animation-delay: 3s;
}

.projectslideshow img:nth-child(3) {
  animation-delay: 6s;
}

.projectslideshow img:nth-child(4) {
  animation-delay: 9s;
}

.projectslideshow img:nth-child(5) {
  animation-delay: 12s;
}

.projectslideshow img:nth-child(6) {
  animation-delay: 15s;
}

.projectslideshow img:nth-child(7) {
  animation-delay: 18s;
}

.projectslideshow img:nth-child(8) {
  animation-delay: 21s;
}

.projectslideshow img:nth-child(9) {
  animation-delay: 24s;
}

.projectslideshow img:nth-child(10) {
  animation-delay: 27s;
}

.projectslideshow img:nth-child(11) {
  animation-delay: 30s;
}

.projectslideshow img:nth-child(12) {
  animation-delay: 33s;
}

<div class="projectslideshow">
    <img src="http://dummyimage.com/100&text=example1.JPG">
    <img src="http://dummyimage.com/100&text=example2.JPG">
    <img src="http://dummyimage.com/100&text=example3.JPG">
    <img src="http://dummyimage.com/100&text=example4.JPG">
    <img src="http://dummyimage.com/100&text=example5.JPG">
    <img src="http://dummyimage.com/100&text=example6.JPG">
    <img src="http://dummyimage.com/100&text=example7.JPG">
    <img src="http://dummyimage.com/100&text=example8.JPG">
    <img src="http://dummyimage.com/100&text=example9.JPG">
    <img src="http://dummyimage.com/100&text=example10.JPG">
    <img src="http://dummyimage.com/100&text=example11.JPG">
    <img src="http://dummyimage.com/100&text=example12.JPG">
</div>

标签： htmlcssanimation