title: How to infinite horizontal scroll an image in jQuery?
body: <p>Im trying to layer 2 images 1 on top of the other and make them scroll infinitely using jQuery. I am able to make the images scroll and layer in CSS but the animation becomes very jerky. How could I create an infinite horizontal scroll on an image using jQuery and keep the animations smooth? </p>
  
  <p>My code so far:</p>
  
  <p>CSS:</p>
  
  <pre><code>@keyframes animatedBackground {
      from { background-position: 0 0; }
      to { background-position: 100% 0; }
  }
  
  #animate-area   { 
      width: 100vw; 
      height: 100vw; 
      background-image: url(http://oi64.tinypic.com/2r7ri29.jpg);
      background-position: 0px 0px;
      background-repeat: repeat-x;
  
      animation: animatedBackground 135s linear infinite;
  }
  
  #animate-area2  { 
      width: 100vw; 
      height: 100vw; 
      background-image: url(http://oi67.tinypic.com/2niy905.jpg);
  
      background-repeat: repeat-x;
    position: relative;
      animation: animatedBackground 80s linear infinite;
  }
  </code></pre>
  
  <p>and HTML:</p>
  
  <pre><code>&lt;div id="animate-area"&gt;&lt;/div&gt;
  &lt;div id="animate-area2"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/hnxnjzaq/2/" rel="nofollow">JSFiddle</a></p>