滚动动画无法正常工作[CSS]

Question

我试图创建一个具有平滑过渡的无限滚动动画。

.container-contribution {
  width: 45%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}

.container-loop {
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
  gap: 2%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #111 20%, #fff 80%, transparent);
}

.container-loop img {
  height: 100%;
  max-height: 350px;
  width: auto;
}

.infoCtb {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 40%;
  animation: loop 30s linear infinite;
}

@keyframes loop {
  from {
    transform: translateX(0%);
    -moz-transform: translateX(0%);
    /* Firefox */
    -webkit-transform: translateX(0%);
    /* Safari & Chrome */
  }
  to {
    transform: translateX(-400%);
    -moz-transform: translateX(-400%);
    /* Firefox */
    -webkit-transform: translateX(-400%);
    /* Safari & Chrome */
  }
}

<div class="container-contribution">
  <h2>Contributors</h2>
  <div class="container-loop">
    <div class="infoCtb">
      <img src="images/ChrisHadfield.jpg" alt="ChrisHadfield">
      <span>Chris Hadfield</span>
    </div>
    <div class="infoCtb">
      <img src="images/GuionBluford.jpg" alt="GuionBluford">
      <span>Guion Bluford</span>
    </div>
    <div class="infoCtb">
      <img src="images/JeremySchnittman.jpg" alt="JeremySchnittman">
      <span>Jeremy Schnittman</span>
    </div>
    <div class="infoCtb">
      <img src="images/MichelleThaller.jpg" alt="MichelleThaller">
      <span>Michelle Thaller</span>
    </div>
    <div class="infoCtb">
      <img src="images/NeildeGrasse.jpg" alt="NeildeGrasse">
      <span>Neil deGrasse</span>
    </div>
    <div class="infoCtb">
      <img src="images/NASA.jpg" alt="NASA">
    </div>
    <!-- Duplicate content for smooth looping -->
    <div class="infoCtb">
      <img src="images/ChrisHadfield.jpg" alt="ChrisHadfield">
      <span>Chris Hadfield</span>
    </div>
    <div class="infoCtb">
      <img src="images/GuionBluford.jpg" alt="GuionBluford">
      <span>Guion Bluford</span>
    </div>
    <div class="infoCtb">
      <img src="images/JeremySchnittman.jpg" alt="JeremySchnittman">
      <span>Jeremy Schnittman</span>
    </div>
    <div class="infoCtb">
      <img src="images/MichelleThaller.jpg" alt="MichelleThaller">
      <span>Michelle Thaller</span>
    </div>
    <div class="infoCtb">
      <img src="images/NeildeGrasse.jpg" alt="NeildeGrasse">
      <span>Neil deGrasse</span>
    </div>
    <div class="infoCtb">
      <img src="images/NASA.jpg" alt="NASA">
    </div>
  </div>
</div>

我在几篇文章中发现，复制元素会隐藏它再次开始的时刻。但是，当我尝试运行它时，它是可见的，并且我找不到解决它的方法。

Answer 1

仅使用 CSS 并不是一件简单的事情，除非您确切知道图像的大小。因此，您可以将每个弯曲的子项设置为其父项的 50%。或者任何其他百分比。

/* Each child div takes up exactly 50% of the parent width */
flex: 0 0 50%;

因此，我们可以得出结论，在 600% 后，6 张图像将完成一圈。我删除了间隙以使其准确。如果您仍然需要边距，可以使用每个图像容器的填充，'.infoCtb`。

var html = document.querySelector(".container-loop").innerHTML
document.querySelector(".container-loop").innerHTML = html + html

.container-contribution {
  width: 45%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}

.container-loop {
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
  gap: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #111 20%, #fff 80%, transparent);
}

.infoCtb {
  /* Each child div takes up exactly 50% of the parent width */
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: loop 5s linear infinite;
  overflow: hidden;
  padding: 2px;
}

.infoCtb span,
.infoCtb img {
  display: block;
  text-align: center;
  width: 100%;
}

@keyframes loop {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-600%);
  }
}

<div class="container-contribution">
  <h2>Contributors</h2>
  <div class="container-loop">
    <div class="infoCtb"><img src="https://picsum.photos/id/111/150/90/" alt="ChrisHadfield"><span>Chris Hadfield</span></div>
    <div class="infoCtb"><img src="https://picsum.photos/id/112/150/90/" alt="GuionBluford"><span>Guion Bluford</span></div>
    <div class="infoCtb"><img src="https://picsum.photos/id/113/150/90/" alt="JeremySchnittman"><span>Jeremy Schnittman</span></div>
    <div class="infoCtb"><img src="https://picsum.photos/id/114/150/90/" alt="MichelleThaller"><span>Michelle Thaller</span></div>
    <div class="infoCtb"><img src="https://picsum.photos/id/115/150/90/" alt="NeildeGrasse"><span>Neil deGrasse</span></div>
    <div class="infoCtb"><img src="https://picsum.photos/id/116/150/90/" alt="NASA"></div>
  </div>
</div>