Gerakkan imej dari kiri ke kanan dan kemudian dari kiri ke kanan semula

Question

Saya menulis CSS untuk beberapa imej dan pada asasnya apa yang saya ingin capai ialah terdapat imej yang harus bergerak dari kiri ke kanan dan apabila ia sampai ke hujung kanan ia akan kelihatan kiri sekali lagi dan lain-lain. Saya dapat menggunakan kod berikut untuk mencapai ini.

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

Ini berfungsi pada desktop, bukan CSS mudah alih, ia menambah tatal ke halaman saya, walaupun apabila imej mencapai ke kanan ia keluar dari kiri semula, tetapi lebar bekas imej ialah 100vw dan imej berada di permulaan bekas apabila imej mencapai Apabila jauh ke kanan terdapat tatal disebabkan oleh lebar bekas yang mempengaruhi elemen mutlak lain pada halaman, saya entah bagaimana boleh melumpuhkan penatalan itu atau menggunakan beberapa cara berbeza untuk mencapai kesan yang sama seperti yang mempengaruhi Perkara yang sama berlaku untuk saya yang lain unsur mutlak.

Answer 1

Masalah yang anda hadapi adalah disebabkan oleh elemen animasi bergerak di luar port pandangan, menyebabkan halaman menatal. Satu cara untuk mengelakkan ini adalah untuk menyembunyikan limpahan pada bekas induk. Walau bagaimanapun, memandangkan anda menyebut bahawa ini mempengaruhi elemen mutlak lain pada halaman, pendekatan lain mungkin menggunakan sifat transformasi CSS dan bukannya menukar sifat kiri atau kanan.

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

Kerangka kunci slaidAnimasi menggunakan translateX untuk mengalihkan imej dari kiri ke kanan. Imej bermula pada skrin (-100%) dan bergerak ke sebelah kanan skrin (100%). Limpahan: sembunyikan pada kelas .row-1 akan menghalang sebarang tatal mendatar yang disebabkan oleh animasi.

Ini akan memberi anda kesan yang anda inginkan tanpa menyebabkan sebarang tatal yang tidak diingini