Fading CSS Slideshow without js that loops

Question

I'm a "new" web designer, and I'm learning yet ! CSS is little hard to me... Please, somebody help me !! :)

I need to do a 4 image transition with fade, in loop, in a sequence from 1 to 2, than 3 and 4, returning to 1.

I already tryed 2 tutorials from here. But when I change the settings to fit to mine, doesn't Work. My result is this : http://www.mafeluvizotto.com.br/crossfading/

After the first sequence, the animation became weard...

The images are here : ...crossfading/1.jpg (2.jpg, 3.jpg and 4.jpg)

Please, somebody could help me, to solve this ?

Thanks very much !!

Solution

The idea behind this is that you need to know the amounts involved. You have to calculate the timing of the animation vs. how many "slides" vs. how long you want them to be displayed for.

In the case of my example, it's 4 slides, 6 seconds each. That helps me calculate the timing of the animation and how long to delay the animation.

The animation timing is determined the 100% of the keyframes divded by the total # of slides, which in this case is 4. That determines that 25% (100/4) is when to fade out -

 @-webkit-keyframes fade {
  0%{
     opacity: 1;
  }
  15% {
     opacity:1;
  }
  25%{
    opacity: 0;
  }
  90% {
     opacity:0;
  }
  100% {
     opacity:1;
  }
}

The percentage before the fade-out and fade-in in this case is 10%. 25-10 = 15, and 100 - 10 = 90. That determines the fading time for each slide.

Then, the duration of the animation is determined by slides x display time. 4 slides multiplied by 6 seconds each gives us 24 seconds of duration.

The delay between each is that time minus each slide, or 6 seconds, which results in:

.slide:nth-child(1) {
    -webkit-animation: fade 24s 18s infinite;
    z-index:10;
}

.slide:nth-child(2) {
    -webkit-animation: fade 24s 12s infinite;
    z-index:10;
}

.slide:nth-child(3) {
    -webkit-animation: fade 24s 6s infinite;
    z-index:10;
}

.slide:nth-child(4) {
    -webkit-animation: fade 24s 0s infinite; 
    z-index:10;
 }

Here is a demo - http://jsfiddle.net/5zx43/1/

To keep the order of the HTML the same order of the slide-show, z-index will have to be utilized and the delay order of the animations in relation to :nth-child() will need to be reversed.

Here is a demo of "correct" order - http://jsfiddle.net/5zx43/2/

This has a great tutorial on it - http://themarklee.com/2013/10/16/simple-crossfading-slideshow-css/

Of course, keep in mind that keyframe and animation prefixes may need to be different for other browsers.

Comments

[13ruce1337]

can we see the css? preferably a jsfiddle. Also I'm not sure if that is entirely possible in css.

[Erik]

Possibly duplicate