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

Posted 2023-03-06

【中文标题】CSS过渡在重新启动动画之前有延迟

【英文标题】：CSS transition has a delay before restarting the animation

【发布时间】：2022-01-18 20:55:26

【问题描述】：

我不知道我在哪里出错了，但是在普通的 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

【问题讨论】：

请提供所有相关代码以提供minimal reproducible sample

【参考方案1】：

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

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

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

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

【讨论】：

我在 codeandsandbox 链接中测试了您的代码，但它不起作用。它仍然留下一个巨大的差距，你可以看到蓝色没有连接

我认为它与元素的宽度和滑块的宽度有关，***.com/questions/30032646/…上有一个答案