我的css动画幻灯片放在最终图像上

Question

试图弄清楚为什么css交叉淡化动画会卡在最终图像上，而不是从头开始重放。

幻灯片放映在最后一张图像上，其他一些后续图像会间歇出现。

以下是一些相关的CSS和HTML。

我错过了什么？我的时机错了吗？

HTML：

  <div class="crossfade">
            <figure></figure>
            <figure></figure>
            <figure></figure>
            <figure></figure>
            <figure></figure>
            <figure></figure>
  </div>

的CSS：

  .crossfade > figure {
  backface-visibility: hidden;
  background-size:contain;
    background-repeat:no-repeat;
  background-position:left top;
  color: transparent;
  height:100%;
  width: 100%;
  width: 100vw;
  position: absolute;
  top:70px;
  z-index: 1000;
  left:0px;
  opacity: 0;
  animation: imageAnimation linear infinite 0s;
  animation-duration:18s;
  animation-iteration-count: infinite; 

  }



  .crossfade > figure:nth-child(1) { 
    animation-delay: 0s;
    background-image: url(../images/slideshow/animation-1.jpg);
  }


  .crossfade > figure:nth-child(2) {
    animation-delay: 3s;
    background-image:url(../images/slideshow/animation-2.jpg);
  }


  .crossfade > figure:nth-child(3) {
    animation-delay: 6s;
    background-image: url(../images/slideshow/animation-3.jpg);
  }


  .crossfade > figure:nth-child(4) {
    animation-delay: 9s;    
    background-image: url(../images/slideshow/animation-4.jpg);
  }


  .crossfade > figure:nth-child(5) {
    animation-delay: 12s;   
    background-image: url(../images/slideshow/animation-5.jpg);
  }


  .crossfade > figure:nth-child(6) {
    animation-delay: 15s;   
    background-image: url(../images/slideshow/animation-6.jpg);
  }




  @keyframes 
  imageAnimation {  0% {
   animation-timing-function: ease-in;
   opacity: 0;
  }
   10% {
   animation-timing-function: ease-out;
   opacity: 1;
  }
   17% {
   opacity: 1
  }
   90% {
   opacity: 1
  }
   100% {
   opacity: 0
  }
  }