title: CSS animation (position) not smooth
body: <p>I made a subtle background movement, but the effect isn't that pleasing. While moving it kinda jerks, you can see the image move pixel by pixel.</p>
  
  <p>How can I change this so it becomes a nice smooth animation.</p>
  
  <p><strong>The Code (<a href="https://jsfiddle.net/38tf0j21/" rel="nofollow">https://jsfiddle.net/38tf0j21/</a>):</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    padding:50px;
    margin 0;
    height:100vh;
  }
  .landing_img_container {
    position: absolute;
    right: 0;
    width: calc(100% - 100px);
    height: 100%;
    animation-name: start_animation;
    animation-delay: 1s;
    animation-direction: normal;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
  }
  .landing_img {
    position: absolute;
    top:  0;
    left:   0;
    bottom: 0;
    right:  0;
    background-color:red;
  }
  @keyframes start_animation {
    0% {
      left: 100px;
    }
    100% {
      left: 50px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="landing_img_container"&gt;
    &lt;div class="landing_img"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>