I'm writing CSS for some images, basically what I want to achieve is, there is an image that should move from the left to the right and when it reaches the right end it should appear left again etc. I was able to use the following code to achieve this.

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

This works on desktop, not mobile CSS, it adds scrolling to my page even though the image comes out of the left again when it reaches the right, but the width of the image container is 100vw and the image is at the beginning of the container when When the image reaches the far right, a scroll occurs due to the container width, which affects other absolute elements on the page, can I somehow disable that scrolling, or use some different way to achieve the same effect, as it The same goes for other absolute elements that affect me.