CSS Animation from Left to Right

Question

I am trying to make an animation in CSS. I read some examples of it online and I cannot figure out what I\'m doing wrong... I want my potato image to go from left t

Answer 1

The accepted answer has the flaw that the element is completely pushed out of the viewport during the animation. This might be desired for some use cases, but I wanted to share a cleaner solution that leverages the CSS transform: translate property.

#pot {
  bottom: 15%;
  display: block;
  position: absolute;
  animation: linear infinite alternate;
  animation-name: run;
  animation-duration: 2s;
}

@-webkit-keyframes run {
    0% {
      left: 0;
      transform: translateX(0);
    }
    100% {
      left: 100%;
      transform: translateX(-100%);
    }
}

I wrote in a bit more detail about this technique here: https://medium.com/@taig/dynamically-position-and-center-an-html-element-with-css-based-on-percentage-5fea0799a589.