如何平稳地完成CSS动画而不会中断

Question

通过运行以下代码，您可以在几秒钟后看到动画中断，无法顺利运行。 我想以我定义的相同宽度连续平稳地运行它。 请帮助，这也是小提琴

 .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(https://i.stack.imgur.com/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;
   }
}

还要放所需的动画速度。