Bewegen Sie das Bild von links nach rechts und dann wieder von links nach rechts

Question

Ich schreibe CSS für einige Bilder und im Grunde möchte ich erreichen, dass sich ein Bild von links nach rechts bewegt und wenn es das rechte Ende erreicht, wieder links angezeigt wird usw. Ich konnte das verwenden folgenden Code, um dies zu erreichen.

@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>

Das funktioniert auf dem Desktop, nicht auf mobilem CSS. Es fügt meiner Seite Scrollen hinzu, selbst wenn das Bild die rechte Seite erreicht, kommt es wieder aus der linken Seite heraus, aber die Breite des Bildcontainers beträgt 100 vw und das Bild befindet sich am Anfang der Seite Container, wenn das Bild erreicht: Ganz rechts gibt es aufgrund der Containerbreite einen Bildlauf, der sich auf andere absolute Elemente auf der Seite auswirkt. Ich kann diesen Bildlauf irgendwie deaktivieren oder eine andere Methode verwenden, um den gleichen Effekt zu erzielen, den er betrifft. Das Gleiche gilt für meine anderen absolute Elemente.

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 将阻止由动画引起的任何水平滚动。

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