Déplacez l'image de gauche à droite puis à nouveau de gauche à droite

Question

J'écris du CSS pour certaines images et, fondamentalement, ce que je veux obtenir, c'est qu'il y ait une image qui doit se déplacer de gauche à droite et lorsqu'elle atteint l'extrémité droite, elle doit apparaître à nouveau à gauche, etc. J'ai pu utiliser le code suivant pour y parvenir.

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

Cela fonctionne sur ordinateur, pas sur CSS mobile, cela ajoute un défilement à ma page, même lorsque l'image atteint la droite, elle ressort à nouveau par la gauche, mais la largeur du conteneur d'image est de 100vw et l'image est au début de la conteneur lorsque l'image atteint À l'extrême droite, il y a un défilement en raison de la largeur du conteneur qui affecte d'autres éléments absolus de la page. Je peux en quelque sorte désactiver ce défilement ou utiliser une manière différente pour obtenir le même effet qu'il affecte. Il en va de même pour mon autre éléments absolus.

Answer 1

Le problème auquel vous êtes confronté est dû au fait que l'élément animé se déplace en dehors de la fenêtre, provoquant le défilement de la page. Une façon d'éviter cela consiste à masquer le débordement sur le conteneur parent. Cependant, puisque vous avez mentionné que cela affecte d'autres éléments absolus de la page, une autre approche pourrait consister à utiliser la propriété de transformation CSS au lieu de modifier les propriétés gauche ou droite.

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

L'image clé

slideAnimation utilise TranslateX pour déplacer l'image de gauche à droite. L'image commence à l'écran (-100 %) et se déplace vers la droite de l'écran (100 %). Débordement : masquer la classe .row-1 empêchera tout défilement horizontal provoqué par l'animation.

Cela vous donnera l'effet souhaité sans provoquer de défilement indésirable