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


Tags: css3,animation,slideshow,direction

Problem :

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



Solution :

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/


    CSS Howto..

    How to make css styles in the document body only specific to a div

    How to make text vertical in a jQuery UI Layout toggler?

    How to pass array from method to property using PHP

    How to remove hover state

    How to create a horizontal calendar with nested lists?

    How can I increase the size of a gomap popup window?

    CSS: How do I prevent the background color of div from going behind the image it is sitting above?

    Flex 4 How to set background image to VBox?

    how to show product info after image in bigger zoom levels

    Getting an class to show when item is clicked

    How to manually apply styles from particular style sheet to an element?

    How do I span columns with a div based table?

    How to center images in div

    How to have div horizontally scroll when resized.

    How to change nested divs within a named div to display as display:inline using CSS or jQuery selectors?

    Single page wordpress template. How to create new section in css

    Dropdown Menu will move all
    Below. How to prevent it?

    How to create this CSS border

    how to access anti aliasing method of a font with CSS

    JSF - How can I format my global messages in in a visually appealing way?

    How to center an img inside a div

    How to style a single QToolButton using qss/css

    960 CSS Framework, how to get full 960 width?

    How to disable and re-enable tabindex of hidden/visible elements?

    How to reveal content behind a div with pure css?

    How to select first a element of li with CSS?

    How to get image info from css into MasterPage'gridview?

    How to use css style in php

    jQuery Show/Hide for and

    How to temporarily modify the CSS of an element