How to force CSS3 slideshow animation to display in correct order?

Question

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.

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.

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).

My code is as follows:

HTML

<div id="cf4a" class="shadow">
   <img alt="Image1" src="../Banners/Image1.png" />
   <img alt="Image2" src="../Banners/Image2.png" />
   <img alt="Image3" src="../Banners/Image3.png" />
   <img alt="Image4" src="../Banners/Image4.png" />
</div>

CSS

@-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;
}

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.

Thanks and sorry for the long post.

Leon

Answer 1

In your case the easiest would be to change their z-index

#cf4a img:nth-of-type(1) {
   -webkit-animation-delay: 0s;
   -moz-animation-delay: 0s;
   -o-animation-delay: 0s;
   animation-delay: 0s;

    z-index:4;
}

#cf4a img:nth-of-type(2) {
   -webkit-animation-delay: 8s;
   -moz-animation-delay: 8s;
   -o-animation-delay: 8s;
   animation-delay: 8s;

    z-index:3;
}

#cf4a img:nth-of-type(3) {
   -webkit-animation-delay: 16s;
   -moz-animation-delay: 16s;
   -o-animation-delay: 16s;
   animation-delay: 16s;

    z-index:2;
}

#cf4a img:nth-of-type(4) {
   -webkit-animation-delay: 24s;
   -moz-animation-delay: 24s;
   -o-animation-delay: 24s;
   animation-delay: 24s;

    z-index:1;
}

Demo at http://jsfiddle.net/gaby/ZUErm/