title: CSS Animation from Left to Right
body: <p>I am trying to make an animation in <code>CSS</code>. 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 to right and then turn around and then go back to the left side again, but I probably messed up something in my code? Any suggestions what I'm doing wrong or how I should face this problem instead?</p>
  <p>Here is my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#pot {
    bottom: 15%;
    position: absolute;
    -webkit-animation: linear infinite alternate;
    -webkit-animation-name: run;
    -webkit-animation-duration: 5s;
  }
  @-webkit-keyframes run {
    0% {
      left: 0;
    }
    50% {
      right: 0;
    }
    100% {
      left: 0;
      , webkit-transform: scaleX(-1);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="pot"&gt;
    &lt;img src="https://i.stack.imgur.com/qgNyF.png?s=328&amp;g=1" width=100px height=100px&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>(sorry mos, safari and opera users)
  <a href="https://jsfiddle.net/oxc12av7/" rel="noreferrer">https://jsfiddle.net/oxc12av7/</a></p>