CSS过渡在重新启动动画之前有延迟

Question

我不知道我在哪里出错了，但是在普通的 HTML + CSS 中，这段代码可以正常工作，但是现在我正在移动以反应动画在重新启动之前有延迟。

我希望动画无限滚动，但它会在最后停止然后重新启动。

HTML 代码

    <div className="carousel">
      <div className="slider">
        <div className="slide_track">
          <div className="slide">
            <div className="slide_img">slide 1</div>
          </div>
          <div className="slide">
            <div className="slide_img">slide 2</div>
          </div>
          <div className="slide">
            <div className="slide_img">slide 3</div>
          </div>
          <div className="slide">
            <div className="slide_img">slide 4</div>
          </div>
          <div className="slide">
            <div className="slide_img">slide 5</div>
          </div>
          <div className="slide">
            <div className="slide_img">slide 6</div>
          </div>
          <div className="slide">
            <div className="slide_img">slide 7</div>
          </div>
        </div>
      </div>
    </div>

CSS

.slider {
  box-shadow: none;
  height: 100px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: auto;
  background-color: lightcoral;
  max-width: 1600px;
}

.slider::before,
.slider::after {
  background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100px;
  position: absolute;
  width: 200px;
  z-index: 2;
}

.slide_img {
  background-color: navy;
  color: #fff;
}

.slider::after {
  right: 0;
  top: 0;
  -webkit-transform: rotateZ(180deg);
  transform: rotateZ(180deg);
}

.slider::before {
  left: 0;
  top: 0;
}

.slider .slide_track {
  animation-name: scroll;
  -webkit-animation-name: scroll;
  animation-duration: 40s;
  -webkit-animation-duration: 40s;
  animation-delay: 0;
  -webkit-animation-delay: 0;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  display: flex;
  width: calc(250px * 7);
}

.slider .slide {
  height: 100px;
  width: 250px;
}

@media screen and (max-width: 992px) {
  .slider {
    width: 100%;
  }
}

@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(calc(-250px * 5));
    transform: translateX(calc(-250px * 5));
  }
}

@keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(calc(-250px * 7));
    transform: translateX(calc(-250px * 7));
  }
}

我试过这样的速记代码

  -webkit-animation: scroll 40s linear infinite;
  animation: scroll 40s linear infinite;

还有很长的

  animation-name: scroll;
  -webkit-animation-name: scroll;
  animation-duration: 40s;
  -webkit-animation-duration: 40s;
  animation-delay: 0;
  -webkit-animation-delay: 0;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;

我为此制作了代码和沙箱，您可以自己看看。

真的很难过，希望有人能提供帮助，因为这似乎是一个简单的解决方法 :)

Codeandsandbox

Answer 1

这与动画的渲染方式有关。

这可能会解决问题，我的建议是尝试一下，看看是否适合您。

@keyframes scroll {
  0% {
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
  }
}

初始值会使元素在窗口之外，并且没有人会注意到重置