关键帧动画在3张图像之间消失

Question

我试图获取3张彼此堆叠的图像，以从一个切换到另一个，然后使用CSS关键帧动画循环播放。

下面是我的代码和小提琴

 <div class="kiara-img">
   <img class="kiki-one" src="https://kiaramelissa.com/virtual/Kiki-1.png">
   <img class="kiki-two" src="https://kiaramelissa.com/virtual/Kiki-2.png">
   <img class="kiki-three"  src="https://kiaramelissa.com/virtual/Kiki-3.png">
 </div>

@keyframes fade {
  0% {
   z-index:1;
  }


  100% {
   z-index:5;
  }

  0% {
    z-index:1;
  }
}
@keyframes fade2 {
  0% {
   z-index:2;
  }


  100% {
   z-index:5;
  }
    0% {
    z-index:2;
  }
}
@keyframes fade3 {
  0% {
   z-index:3;
  }

  100% {
   z-index:5;
  }
    0% {
    z-index:3;
  }
}


.kiara-img img:nth-of-type(1) {
  position:absolute;
    animation-name: fade;
    animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 9s;
}

.kiara-img img:nth-of-type(2) {
    position:absolute;
      animation-name: fade2;
      animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 6s;
}

.kiara-img img:nth-of-type(3) {
    position:absolute;
   animation-name: fade3;
   animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 3s;
}

.kiara-img {
  position:relative;
}

https://jsfiddle.net/ft6wcLy5/

编辑，我最初使用的是不透明性，但它一直在跳跃并完全跳过一张图像，然后完全开始乱转并奇怪地闪烁。

所以我选择了z-index。不确定是否会引起任何问题？使用z-index实现我想要的功能吗？

我无法弄清楚我到底在做什么错。...任何帮助将不胜感激！