图像滑块在最后一张图像后不可见？

Question

所以我有一个图像滑块，它的工作原理......有点儿。我的问题在于我有3张图片。滑块滑过这些图像，但当它从第3张图像（最后一张）滑落时，它只是消失了，但然后再次滑回第一张图像？我需要它，因此它从最后一个滑动到第一个，而不是在一个间隔内不可见。这是我目前的代码：

#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

试试这个

＆＃13;

＆＃13;

#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%;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您的图片仅填充60％的空间（3x 20％），再添加2张图像以填充空间或将图像拉伸至33.33％的宽度并计算为300％（将动画调整为0％，100％和200％ ）