title: Background image CSS3 infinite loop animation
body: <p>I'm trying to animate some steam which is a background image on a div to infinitely loop an animation. I've got it almost right apart from there's a jump every 5 seconds (once the animation is complete).</p>
  
  <p>Here's what I've done so far:</p>
  
  <pre><code>div#steam { background-image: url('../images/steam.png'); background-repeat: repeat-y; background-position: left bottom; -webkit-animation: slide 5s linear infinite; }
  @-webkit-keyframes slide {
      from { background-position: left 0; }
      to { background-position: left 100%; }
  }
  </code></pre>
  
  <p>So this repeats the background vertically which is what I want, then it animates fine and at a decent speed for it to look realistic. The only problem is the jump after the 5 second animation has finished each cycle. How can I get around this?</p>
  
  <p><strong>JSFIDDLE:</strong> <a href="http://jsfiddle.net/UHgF8/5/" rel="nofollow">http://jsfiddle.net/UHgF8/5/</a></p>