title: Displaying a Linear Background Img Animation Without Choppiness
body: <p>I have two sections on my site, the first one uses <code>background X</code> and the second uses <code>background Y</code>.</p>
  
  <p>There is a animated background for the first section. It looks like this:</p>
  
  <pre><code>body {
    margin:0;
    padding:0;
    background: #2980b9 url('http://static.tumblr.com/03fbbc566b081016810402488936fbae/pqpk3dn/MRSmlzpj3/tumblr_static_bg3.png') repeat 0 0;
    -webkit-animation: 10s linear 0s normal none infinite animate;
    -moz-animation: 10s linear 0s normal none infinite animate;
    -ms-animation: 10s linear 0s normal none infinite animate;
    -o-animation: 10s linear 0s normal none infinite animate;
    animation: 10s linear 0s normal none infinite animate;
    animation-direction: reverse;
  }
  
  @-webkit-keyframes animate {
    from {background-position:0 0;}
    to {background-position: -512px 0;}
  }
  
  @-moz-keyframes animate {
    from {background-position:0 0;}
    to {background-position: -512px 0;}
  }
  
  @-ms-keyframes animate {
    from {background-position:0 0;}
    to {background-position: -512px 0;}
  }
  
  @-o-keyframes animate {
    from {background-position:0 0;}
    to {background-position: -512px 0;}
  }
  
  @keyframes animate {
    from {background-position:0 0;}
    to {background-position: -512px 0;}
  }
  </code></pre>
  
  <p>Once an event is called, IE going from section 1 to section 2, some jQuery modifies the background image, reverses the direction, and transitions it all in nicely:</p>
  
  <pre><code>function redrawBackground(image) {
    $('body').css({
      "background": "url(" + image + ")",
      "background-size": "cover",
      "background-repeat": "repeat-x",
      "animation-direction": "normal",
      "-webkit-transition": 'all .8s ease',
      "-moz-transition": 'all .8s ease',
      "-ms-transition": 'all .8s ease',
      "-o-transition": 'all .8s ease',
      "transition": 'all .8s ease'
    })
  }
  </code></pre>
  
  <p>Now, I'm noticing the the section background image has a issue with choppiness. I would like a seamless transition from the end of the image, as it repeats on itself. I currently notice a significant, obvious change when the background image finishes scrolling through itself and begins again.</p>
  
  <p>Any suggestions for seamless background animation transitions?</p>
  
  <p>UPDATE: additional information: background IMG #1 has a width of 500px. Background IMG #2 has a width of 512px. Both have CSS properties of <code>background-size: cover;</code> and <code>background-repeat: repeat-x;</code></p>
  
  <p>It might be wise to also dynamically change the animate keyframe from 500px to 512px, but I'm primarily concerned with the apparent choppiness of the second background image. The background doesn't quite seamlessly transition from the end of the image to the start of itself again.</p>