1

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

3
  • I have regretted suggesting this code many times – it's really not that great and isn't really the best way to do it. The way I actually do this is to use JS + a setInterval to move a class from image to image every 2-3 seconds. The class just has opacity:1, with the others being opacity:0. That plus a transition for opacity works well. I've found in testing (though it was a while ago) that these animations use a lot of CPU, even when nothing is visibly animating. Dec 29, 2012 at 13:12
  • @ Rich Bradshaw - Quite ironic that the author of the page I got the code from should come across my question about the very same code on a different site. I hadn't noticed the CPU usage issue before. Noted. I'm trying to keep it independent from JS in case the client browser doesn't have JS enabled (not likely these days but still...). Many thanks for your advice!
    – OCD
    Dec 29, 2012 at 14:35
  • Haha, I read through the code, then thought I recognised it! :) The technique isn't necessarily bad, but it's quite inflexible, and I probably wouldn't recommend it unless there is a specific reason. Remember that JS != evil, and that HTML+CSS+JS = webpage. There are legitimate reasons to avoid JS for some things (for Google, Screenreaders etc), but for an image fader, those users don't really care, and the ones who disable JS by choice will likely be disabling it because they don't like CPU hogs like animation! Dec 29, 2012 at 16:18

1 Answer 1

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/

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.