title: How to force CSS3 slideshow animation to display in correct order?
body: <p>I have 4 images on my webpage. I am using CSS to fade from one image to the next in an infinite loop. I want to force the direction of the 'slideshow' so that it starts with the first image referenced in html and sequentially moves through to the fourth (1 -> 2 -> 3-> 4) and then returns to the start and loops indefinitely.</p>
  
  <p>If I try specifying the correct order in CSS, the fourth image displays first with a long delay before entering the loop from the beginning.</p>
  
  <p>I can only really get the images looping properly in reverse order - that is to say 4,3,2,1. I wouldn't mind so much except that I plan to fall-back to jQuery Cycle Lite for browsers that don't support CSS3 and I know that Cycle Lite will loop in the order that the images are referenced in markup (1,2,3,4 etc).</p>
  
  <p>My code is as follows:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="cf4a" class="shadow"&gt;
     &lt;img alt="Image1" src="../Banners/Image1.png" /&gt;
     &lt;img alt="Image2" src="../Banners/Image2.png" /&gt;
     &lt;img alt="Image3" src="../Banners/Image3.png" /&gt;
     &lt;img alt="Image4" src="../Banners/Image4.png" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>@-webkit-keyframes cf4FadeInOut {
     0% {opacity:1;}
     19% {opacity:1;}
     25% {opacity:0;}
     94% {opacity:0;}
     100% {opacity:1;}
  }
  
  @-moz-keyframes cf4FadeInOut {
     0% {opacity:1;}
     19% {opacity:1;}
     25% {opacity:0;}
     94% {opacity:0;}
     100% {opacity:1;}
  }
  
  @-o-keyframes cf4FadeInOut {
     0% {opacity:1;}
     19% {opacity:1;}
     25% {opacity:0;}
     94% {opacity:0;}
     100% {opacity:1;}
  }
  
  @keyframes cf4FadeInOut {
     0% {opacity:1;}
     19% {opacity:1;}
     25% {opacity:0;}
     94% {opacity:0;}
     100% {opacity:1;}
  }
  
  #cf4a {
     position:relative;
     height:350px;
     width:990px;
     margin:30px auto;
  }
  
  #cf4a img {
     position:absolute;
     left:0;
  }
  
  #cf4a img {
     -webkit-animation-name: cf4FadeInOut;
     -webkit-animation-timing-function: ease-in-out;
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-duration: 32s;
  
     -moz-animation-name: cf4FadeInOut;
     -moz-animation-timing-function: ease-in-out;
     -moz-animation-iteration-count: infinite;
     -moz-animation-duration: 32s;
  
     -o-animation-name: cf4FadeInOut;
     -o-animation-timing-function: ease-in-out;
     -o-animation-iteration-count: infinite;
     -o-animation-duration: 32s;
  
     animation-name: cf4FadeInOut;
     animation-timing-function: ease-in-out;
     animation-iteration-count: infinite;
     animation-duration: 32s;
  }
  
  #cf4a img:nth-of-type(1) {
     -webkit-animation-delay: 0s;
     -moz-animation-delay: 0s;
     -o-animation-delay: 0s;
     animation-delay: 0s;
  }
  
  #cf4a img:nth-of-type(2) {
     -webkit-animation-delay: 8s;
     -moz-animation-delay: 8s;
     -o-animation-delay: 8s;
     animation-delay: 8s;
  }
  
  #cf4a img:nth-of-type(3) {
     -webkit-animation-delay: 16s;
     -moz-animation-delay: 16s;
     -o-animation-delay: 16s;
     animation-delay: 16s;
  }
  
  #cf4a img:nth-of-type(4) {
     -webkit-animation-delay: 24s;
     -moz-animation-delay: 24s;
     -o-animation-delay: 24s;
     animation-delay: 24s;
  }
  </code></pre>
  
  <p>So, if anyone can advise on how to get my slideshow working without showing the 4th slide for 24 seconds before behaving itself, I'd be very grateful.</p>
  
  <p>Thanks and sorry for the long post.</p>
  
  <p>Leon</p>