title: Moving background image increases in size as it moves
body: <p>I am trying to achieve an effect where a given background image moves on a horizontal axis and repeats itself, giving this illusion effect of infinite looped images.</p>
  
  <p>I am using HTML and CSS only and the issue is that over time, the background image increases in size and I don't know why. I think Javascript/Jquery has to be used here, but I'm novice and I'm pretty much stuck in progress and don't know a solution. Here's a codepen of what I have created so far.</p>
  
  <p><a href="https://codepen.io/Agnis/pen/aEQjPB" rel="nofollow noreferrer">https://codepen.io/Agnis/pen/aEQjPB</a></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>* {
    margin: 0px;
    padding: 0px;
  }
  
  body {
    background-color: white;
  }
  
  @-webkit-keyframes backgroundAnimate {
    from {
      left: 0;
      top: 0;
    }
    to {
      left: -10000px;
      top: -2000px;
    }
  }
  
  @-moz-keyframes backgroundAnimate {
    from {
      left: 0;
      top: 0;
    }
    to {
      left: -10000px;
      top: -2000px;
    }
  }
  
  @-o-keyframes backgroundAnimate {
    from {
      left: 0;
      top: 0;
    }
    to {
      left: -10000px;
      top: -2000px;
    }
  }
  
  @keyframes backgroundAnimate {
    from {
      left: 0;
      top: 0;
    }
    to {
      left: -10000px;
      top: -2000px;
    }
  }
  
  #back {
    background: url(https://image.ibb.co/gF0ZHR/imageedit_2_8525438394.png);
    position: fixed;
    top: 0;
    background-size: cover;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
    z-index: -1;
    -webkit-animation-name: backgroundAnimate;
    -webkit-animation-duration: 200s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: backgroundAnimate;
    -moz-animation-duration: 5s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -o-animation-name: backgroundAnimate;
    -o-animation-duration: 200s;
    -o-animation-timing-function: linear;
    -o-animation-iteration-count: infinite;
    animation-name: backgroundAnimate;
    animation-duration: 200s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  
  #front {
    background: url(https://image.ibb.co/gF0ZHR/imageedit_2_8525438394.png) position: fixed;
    top: 0;
    left: 0;
    background-size: cover;
    right: 0;
    bottom: 0;
    opacity: 0.5;
    z-index: -1;
    -webkit-animation-name: backgroundAnimate;
    -webkit-animation-duration: 300s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: backgroundAnimate;
    -moz-animation-duration: 300s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -o-animation-name: backgroundAnimate;
    -o-animation-duration: 300s;
    -o-animation-timing-function: linear;
    -o-animation-iteration-count: infinite;
    animation-name: backgroundAnimate;
    animation-duration: 300s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="back"&gt;&lt;/div&gt;
  &lt;div id="front"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The desired effect is that the background image moves to the left and DOESN'T increase in size, which is the opposite of what happens now.</p>
  
  <p>Any help? Much appreciated!</p>