html - 如何流畅的做完不间断的CSS动画

Question

运行下面的代码，您可以看到它在几秒钟结束后中断了动画，运行不流畅。我想以我定义的相同宽度连续平稳地运行它。请帮忙，这里是fiddle还有

.tech-slideshow {
  height: 200px;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.tech-slideshow > div {
  height: 200px;
  width: 126px;
  background: url(/image/IcC0b.png) repeat-x;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: translate3d(0, 0, 0);
}
.tech-slideshow .mover-1 {
  animation: moveSlideshow 8s linear infinite;
}
.tech-slideshow .mover-2 {
  opacity: 0;
  transition: opacity 0.5s ease-out;
  background-position: 0 -200px;
  animation: moveSlideshow 15s linear infinite;
}
.tech-slideshow:hover .mover-2 {
  opacity: 1;
}

@keyframes moveSlideshow {
  100% { 
    transform: translateX(-66.6666%);  
  }
}

<div class="tech-slideshow">
  <div class="mover-1"></div>
  <div class="mover-2"></div>
</div>

Answer 1

您可以为背景的位置设置动画，例如，将其向左移动图像的宽度，这样当动画结束并再次开始时，您实际上不会看到差异。在本例中，背景图片的宽度为26px，因此，您需要将背景向左滑动至该背景的宽度。一般来说，有很多选择，这完全取决于您需要解决什么任务。

@keyframes moveSlideshow {
   100% {
     background-position-x: -26px;
   }
}

同时设置所需的动画速度。