title: Cross-Fade between images with CSS in loop
body: <p>I want to fade between images in a loop (like result here-<a href="http://jsfiddle.net/5M2PD/">jsfiddle.net/5M2PD</a>) but purely through <code>CSS</code>, no <code>JavaScript</code>. I tried using key-frames but I wasn't successful. Please Help.  </p>
  
  <pre><code>@keyframes cf3FadeInOut {
      0% {
          opacity:1;
      }
      45% {
          opacity:1;
      }
      55% {
          opacity:0;
      }
      100% {
          opacity:0;
      }
  }
  
  #cf3 img.top {
     animation-name: cf3FadeInOut;
     animation-timing-function: ease-in-out;
     animation-iteration-count: infinite;
     animation-duration: 10s;
     animation-direction: alternate;
  }
  </code></pre>