将图像从左向右移动，然后再次从左向右移动

Question

我正在为一些图像编写CSS，基本上我想要实现的是，有一个图像应该从左侧移向右侧，当它到达右端时它应该再次出现左侧等等，我能够使用以下代码来实现这一点。

@keyframes slideAnimation {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

.row-1 {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 100%;
}

.image-container {
  position: absolute;
  top: 4%;
  width: 100vw !important;
  overflow: hidden;
  animation: slideAnimation 18s linear infinite;
}

<div class="row-1">
  <div class="image-container">
    <img class="img" src="/src/assets/image.svg" alt="img">
  </div>
</div>

这适用于桌面，不适用于移动CSS，它会向我的页面添加滚动，即使图像到达右侧时再次从左侧出来，但图像容器的宽度为100vw，并且图像位于容器的开头当图像到达最右侧时，由于容器宽度，会出现一个滚动，这会影响页面上的其他绝对元素，我可以以某种方式禁用该滚动，或者使用某种不同的方式实现相同的效果，因为它会影响我的其他绝对元素也是如此。

Answer 1

您面临的问题是由于动画元素移动到视口之外，导致页面滚动。防止这种情况的一种方法是隐藏父容器上的溢出。但是，由于您提到这会影响页面上的其他绝对元素，因此另一种方法可能是使用 CSS 变换属性，而不是更改左侧或右侧属性。

@keyframes slideAnimation {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.row-1 {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}

.image-container {
  position: absolute;
  top: 4%;
  width: 100%;
  animation: slideAnimation 18s linear infinite;
}

slideAnimation 关键帧使用translateX 将图像从左向右移动。图像从屏幕开始 (-100%)，然后移动到屏幕右侧 (100%)。 .row-1 类上的 Overflow: hide 将阻止由动画引起的任何水平滚动。

这将为您提供所需的效果，而不会导致任何不需要的滚动