title: Pure CSS3 crossfade
body: <p>I'm working on a pure CSS3 crossfader between images. The problem I'm having is that its only two images and when the second image fades out, it fades to white instead of looping straight back to image 1.</p>
  
  <p>My not so working fiddle is here: <a href="http://jsfiddle.net/uQU6y/2/" rel="nofollow">http://jsfiddle.net/uQU6y/2/</a></p>
  
  <pre><code>.item img {
      position:absolute;
      left:0;
      top:0;
      -webkit-animation-name: fade;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-duration: 6s;
      animation-name: fade;
      animation-iteration-count: infinite;
      animation-duration: 6s;
  }
  
  @-webkit-keyframes fade {
      0% {opacity: 0;}
      20% {opacity: 1;}
      33% {opacity: 1;}
      53% {opacity: 0;}
      100% {opacity: 0;}
  }
  
  #f2 {
      -webkit-animation-delay: -4s;
  }
  </code></pre>