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(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;
   }
}

还要设置所需的动画速度。

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

1 个答案: