html - 图像 slider 在最后一张图像后变得不可见？

Question

所以我有一个图像 slider ，它可以工作……有点。我的问题在于我有 3 张图片。 slider 滑过这些图像，但是当它滑出第三张图像(最后一张)时它就消失了，然后又滑回第一张图像？我需要它，以便它从最后一个滑到第一个，而不是在一段时间内不可见。这是我目前的代码:

#imgslide {
  width: 550px;
  height: 300px;
  border-radius: 10px;
  position: relative;
  top: 25%;
  left: 50%;
  margin-top: -150px;
  margin-left: -225px;
  overflow: hidden;
}
#imgslide figure img {
  width: 20%;
  float: left;
}
#imgslide figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 15s slidy infinite;
}
/* Keyframes */

@keyframes slidy {
  0% {
    left: 0%;
  }
  20% {
    left: 0%;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  95% {
    left: -300%;
  }
  100% {
    left: -400%;
  }
}

<div id="imgslide">
  <figure>
    <img src="http://www.indraneelghosh.com/img/sport/sport_318_test-201.gif" alt="">
    <img src="http://www.indraneelghosh.com/img/sport/sport_318_test-201.gif" alt="">
    <img src="http://www.indraneelghosh.com/img/sport/sport_318_test-201.gif" alt="">
  </figure>
</div>

Answer 1

试试这个

#imgslide {
  width: 450px;
  height: 300px;
  border-radius: 10px;
  position: relative;
  top: 25%;
  left: 50%;
  margin-top: 100px;
  margin-left: -225px;
  overflow: hidden;
}
#imgslide figure img {
  width: 20%;
  float: left;
}
#imgslide figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 15s slidy infinite;
}
/* Keyframes */

@keyframes slidy {
  0% {
    left: 0%;
  }
  20% {
    left: 0%;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: 0%;
  }
}

<div id="imgslide">
  <figure>
    <img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
    <img src="http://demosthenes.info/assets/images/taj-mahal.jpg" alt="">
    <img src="http://demosthenes.info/assets/images/ankor-wat.jpg" alt="">
  </figure>
</div>