Простое CSS Слайд-шоу застрял на последних 3 изображениях

Question

Я пытался создать очень простую галерею изображений с автопрокруткой для кого-то, и хотя она ДЕЙСТВИТЕЛЬНО функционирует, она вращается только через последние 3 изображения после первого l oop, и я не могу понять, почему. Любая помощь будет принята с благодарностью!

* Примечание. Система, в которой я пытаюсь внедрить это слайд-шоу, использует шаблонные темы для веб-дизайнов, поэтому я не могу получить доступ / редактировать / et c любые внешние . 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>