Анимация с анимацией, трансформацией, переводом HTML, CSS

Question

Я хочу переместить изображение линейно справа налево от экрана и сделать это в al oop. ПОМОГИТЕ, но мой код не работает должным образом. Мой HTML код.

<div class="row">    
   <div class="column">
       <img class="move"  src="image.png" alt="image">
   </div>

Мой стиль. css код.

.pacman {
    transform: scaleX(-1);
    width: 50px;
    height: 50px;
    position: absolute;
    right: 0%;
    animation: chase 8s infinite linear;
}


@keyframes chase { 
    0% { transform: translateX(100%);}
    50% { transform: translateX(50%);}
    100% { transform: translateX(0%);}
}

Answer 1

transform не делает то, что вы думаете, что делает. Преобразование влияет только на визуальную позицию элемента, соответствующую самой .

Чтобы переместить элемент по странице, необходимо анимировать значение right.

Я добавил дополнительное преобразование, чтобы изображение полностью покинуло страницу.

body {
  overflow: hidden;
}

img {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 25%;
  right: 0%;
  animation: chase 4s infinite linear;
}

@keyframes chase {
  0% {
    right: 0;
    transform: translateX(100%);
  }
  100% {
    right: 100%;
    transform: translatex(-100%);
  }
}

<img src="http://www.fillmurray.com/50/50" alt="">