title: how can I avoid this css3 background loop jump?
body: <p>I've been experimenting lately with some css3. What I'm trying to do is make a background image slide left and repeat seamlessly to give the effect of an infinite background animation (kind of like how they do backgrounds in old cartoons, where it's just looping over and over...). The problem that I'm facing with this css3 is that once the animation is complete, it snaps back into it's starting position. See here: <a href="http://digitalbrent.com/blog/" rel="nofollow">my blog</a>. The background of the entry titled "super sluggy" will snap back into place after the animation has completed. I've been looking through w3schools for the answer, and google and even related stack questions but I can't find the solution anywhere. Here is my code:</p>
  
  <pre><code>@keyframes l_2_r
  {
  from {background-position: top left;}
  to {background-position: top right;}
  }
  
  @-moz-keyframes l_2_r
  {
  from {background-position: top left;}
  to {background-position: top right;}
  }
  
  @-webkit-keyframes l_2_r
  {
  from {background-position: top left;}
  to {background-position: top right;}
  }
  
  @-o-keyframes l_2_r
  {
  from {background-position: top left;}
  to {background-position: top right;}
  }
  
  #sluggy_div{
  background: url('../imgs/sluggy-bg.jpg') repeat-x;
  animation: l_2_r 7s linear infinite;
  -moz-animation: l_2_r 7s linear infinite;
  -webkit-animation: l_2_r 7s linear infinite;
  -o-animation: l_2_r 7s linear infinite;
  }
  </code></pre>
  
  <p>the background itself is seamless if repeated along the x axis, however when animated the transition is a quick snap and I'd like it to be seamless or not noticable to the user I should say.</p>
  
  <p>Does anyone know how to fix this? Thanks!</p>