title: CSS fading animation timing off
body: <p>so I'm trying to fade 3 images, one on top of each other slowly so you can see each image for a few secs before the next one fades on top. I'm following <a href="http://css3.bradshawenterprises.com/cfimg/" rel="nofollow">this tutorial here.</a> However for some reason my images seem to fade over each other too fast and I can't control the timing well.</p>
  
  <p><strong><a href="http://leongaban.com/_stack/css_animation/cssbanner.html" rel="nofollow">Here is my preview page.</a></strong> You are suppose to see a bird, then tomatoes then a boat, but right now it just all fades on top of each other and ends up on the boat.</p>
  
  <p>I'm following Demo 1 and Demo 3, any ideas why my animation is off? Thanks in advance! :)</p>
  
  <p><strong>My jsfiddle:</strong>
  <a href="http://jsfiddle.net/leongaban/TPjWG/" rel="nofollow">http://jsfiddle.net/leongaban/TPjWG/</a></p>
  
  <p><strong>CODE:</strong></p>
  
  <p></p>
  
  <pre><code>&lt;style&gt;
  
  @-webkit-keyframes cf4FadeInOut {
   0% {
     opacity:0;
   }
   25% {
     opacity:1;
   }  
   50% {
     opacity:1;
   }
   100% {
     opacity:1;
   }
  }
  
  @-moz-keyframes cf4FadeInOut {
   0% {
     opacity:0;
   }
   25% {
     opacity:1;
   }  
   50% {
     opacity:1;
   }
   100% {
     opacity:1;
   }
  }
  
  @-ms-keyframes cf4FadeInOut {
   0% {
     opacity:0;
   }
   25% {
     opacity:1;
   }  
   50% {
     opacity:1;
   }
   100% {
     opacity:1;
   }
  }       
  
  #cf4a {
      position:relative;
      height:250px;
      width:300px;
      margin:0 auto;
  }
  #cf4a img {
      position:absolute;
      left:0;
  }
  
  #cf4a img {
      -webkit-animation-name: cf4FadeInOut;
      -webkit-animation-timing-function: ease-in-out;
      -webkit-animation-iteration-count: 1;
      -webkit-animation-duration: 30s;
  
      -moz-animation-name: cf4FadeInOut;
      -moz-animation-timing-function: ease-in-out;
      -moz-animation-iteration-count: 1;
      -moz-animation-duration: 30s;
  
      -ms-animation-name: cf4FadeInOut;
      -ms-animation-timing-function: ease-in-out;
      -ms-animation-iteration-count: 1;
      -ms-animation-duration: 30s;                
  }
  #cf4a img:nth-of-type(1) {
      -webkit-animation-delay: 0;     
      -moz-animation-delay: 0;    
      -ms-animation-delay: 0; 
  }
  #cf4a img:nth-of-type(2) {
      -webkit-animation-delay: 30s;       
      -moz-animation-delay: 30s;  
      -ms-animation-delay: 30s;
  }
  #cf4a img:nth-of-type(3) {
      -webkit-animation-delay: 60s;       
      -moz-animation-delay: 60s;      
      -ms-animation-delay: 60s;       
  }
  
  &lt;/style&gt;
  
  &lt;div id="cf4a"&gt;
  
      &lt;a href="http://http://stackoverflow.com/" target="_blank"&gt;&lt;img src="img/bird1.jpg" /&gt;&lt;/a&gt;
      &lt;a href="http://http://stackoverflow.com/" target="_blank"&gt;&lt;img src="img/tomato2.jpg" /&gt;&lt;/a&gt;
      &lt;a href="http://http://stackoverflow.com/" target="_blank"&gt;&lt;img src="img/boat3.jpg" /&gt;&lt;/a&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>