为什么这个css动画无限自动播放旋转木马会在项目重置时跳转？

Question

我正在根据此处的示例创建无限自动播放轮播：https://codepen.io/jackoliver/pen/qVbQqW

注意codepen示例的流畅程度，当轮播从最后一个项重置为第一个项时，它永远不会跳转。

我的不太顺利 - 我的重置是跳跃，我无法弄清楚为什么......

body {
  align-items: center;
  background: #E3E3E3;
  display: flex;
  height: 100vh;
  justify-content: center;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-456px * 2));
  }
}
.quotes-famous {
  background: white;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
  height: 500px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 960px;
}
.quotes-famous::before, .quotes-famous::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 500px;
  position: absolute;
  width: 200px;
  z-index: 2;
}
.quotes-famous::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.quotes-famous::before {
  left: 0;
  top: 0;
}

.quotes-famous__track {
  animation: scroll 1s linear infinite;
  display: flex;
  width: calc(456px * 4);
}

.quotes-famous__quote {
  background: #efefef;
  height: 500px;
  width: 456px;
}

<div class="quotes-famous">
   <div class="quotes-famous__track">
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Quisque at lorem sollicitudin, elementum justo a, dictum tortor. Donec dapibus elementum augue, in imperdiet lorem posuere nec. Sed scelerisque scelerisque imperdiet. </p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Phasellus dictum leo enim, a dignissim erat vestibulum at. Sed vitae libero id mauris ullamcorper elementum. Praesent at accumsan ipsum. Quisque sit amet posuere mauris. Proin ac vulputate odio, quis faucibus sem. Cras nec consectetur neque.</p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Sed sagittis ligula ut est faucibus egestas.</p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Fusce convallis, risus et luctus tempus, urna orci accumsan tortor, accumsan euismod arcu lectus vitae neque. Nulla tincidunt, augue non efficitur euismod, nunc diam feugiat turpis, convallis lacinia velit enim et nisl. Sed at suscipit augue. Curabitur sed dolor metus. Nunc augue eros, aliquet sed mi ac, pulvinar fermentum mauris. Cras condimentum sapien tellus, nec efficitur odio imperdiet vitae.</p>
      </div>
  </div>
</div>

Answer 1

codepen示例在所有图像（或您的情况下为引号）上加倍。

＆＃13;

＆＃13;

body {
  align-items: center;
  background: #E3E3E3;
  display: flex;
  height: 100vh;
  justify-content: center;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-456px * 2));
  }
}
.quotes-famous {
  background: white;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
  height: 500px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 960px;
}
.quotes-famous::before, .quotes-famous::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 500px;
  position: absolute;
  width: 200px;
  z-index: 2;
}
.quotes-famous::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.quotes-famous::before {
  left: 0;
  top: 0;
}

.quotes-famous__track {
  animation: scroll 4s linear infinite;
  display: flex;
  width: calc(456px * 4);
}

.quotes-famous__quote {
  background: #efefef;
  height: 500px;
  width: 456px;
}

＆＃13;

<div class="quotes-famous">
   <div class="quotes-famous__track">
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Quisque at lorem sollicitudin, elementum justo a, dictum tortor. Donec dapibus elementum augue, in imperdiet lorem posuere nec. Sed scelerisque scelerisque imperdiet. </p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Phasellus dictum leo enim, a dignissim erat vestibulum at. Sed vitae libero id mauris ullamcorper elementum. Praesent at accumsan ipsum. Quisque sit amet posuere mauris. Proin ac vulputate odio, quis faucibus sem. Cras nec consectetur neque.</p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Sed sagittis ligula ut est faucibus egestas.</p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Fusce convallis, risus et luctus tempus, urna orci accumsan tortor, accumsan euismod arcu lectus vitae neque. Nulla tincidunt, augue non efficitur euismod, nunc diam feugiat turpis, convallis lacinia velit enim et nisl. Sed at suscipit augue. Curabitur sed dolor metus. Nunc augue eros, aliquet sed mi ac, pulvinar fermentum mauris. Cras condimentum sapien tellus, nec efficitur odio imperdiet vitae.</p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Quisque at lorem sollicitudin, elementum justo a, dictum tortor. Donec dapibus elementum augue, in imperdiet lorem posuere nec. Sed scelerisque scelerisque imperdiet. </p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Phasellus dictum leo enim, a dignissim erat vestibulum at. Sed vitae libero id mauris ullamcorper elementum. Praesent at accumsan ipsum. Quisque sit amet posuere mauris. Proin ac vulputate odio, quis faucibus sem. Cras nec consectetur neque.</p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Sed sagittis ligula ut est faucibus egestas.</p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Fusce convallis, risus et luctus tempus, urna orci accumsan tortor, accumsan euismod arcu lectus vitae neque. Nulla tincidunt, augue non efficitur euismod, nunc diam feugiat turpis, convallis lacinia velit enim et nisl. Sed at suscipit augue. Curabitur sed dolor metus. Nunc augue eros, aliquet sed mi ac, pulvinar fermentum mauris. Cras condimentum sapien tellus, nec efficitur odio imperdiet vitae.</p>
      </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;