將影像從左向右移動，然後再次從左向右移動

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 將阻止動畫引起的任何水平滾動。

這將為您提供所需的效果，而不會導致任何不必要的滾動