CSS slideshow doesn't work after the first loop

Question

I wanted to learn from a tutorial but i messed things up... It seems that some images in the slideshow overlap after the first loop. I don't know why it never shows the first picture again. Help would be appreciated...

            <div class="slides">
<ul><!-- slides -->
    <li><img src="http://cdn.imghack.se/images/08b84eb923891fcc01dd3cdc4c1b1c7b.png"></li>
    <li><img src="http://cdn.imghack.se/images/aface157d33eed1ac449df27428bb339.png"></li>
    <li><img src="http://cdn.imghack.se/images/30dba15fd1c89ad8b6e6363b8ede09f9.png"></li>

</ul><!-- slides -->

.slides {
height:300px;
overflow:hidden;
position:relative;
width:705px;
background: black;
box-shadow: black 0 0 3px;
}
.slides ul {
margin-top:0;
list-style:none;
position:relative;
padding: 0;
}

/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
0% {opacity:0;}
25% {opacity:1;}
50% {opacity:1;}
75% {opacity:1;}
100% {opacity:0;}
}
@-moz-keyframes anim_slides {
0% {opacity:0;}
25% {opacity:1;}
50% {opacity:1;}
75% {opacity:1;}
100% {opacity:0;}
}

.slides ul li {
opacity:0;
position:absolute;
top:0;

/* css3 animation */
-webkit-animation-name: anim_slides;
-webkit-animation-duration: 4s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;

-moz-animation-name: anim_slides;
-moz-animation-duration: 4s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
}

/* css3 delays */
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
}
.slides ul li img {
display:block;
}

http://jsfiddle.net/5kdc2/3/

Answer 1

The problem is if you need a repeated cycle of animation, the cycle time of all the animations should be equal. The cycle time here is the total of animation-duration and animation-delay. So you can't set the same animation-duration but with different animation-delays. In fact it's totally OK if right after the first cycle, we can remove all the animation-delay (set all to 0), of course this could be done only by script.

So I think you should use the same animation-duration (as the cycle time) and set different animation-names (we need to use different keyframes for each animation). Here are the code details:

@-webkit-keyframes anim_slides {
  0%, 23%, 100% {opacity:1;}
  36%, 90% {opacity:0;}            
}
@-webkit-keyframes anim_slides2 {
  0%, 23%, 69%, 100% {opacity:0;}
  36%, 56% {opacity:1;}    
}

@-webkit-keyframes anim_slides3 {
  0%, 56%, 100% {opacity:0;}    
  69%, 89% {opacity:1;}    
}
.slides ul  li:nth-child(1), .slides ul  li:nth-child(1) div {    
  -webkit-animation-name: anim_slides;
}
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {           
  -webkit-animation-name: anim_slides2;    
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {        
  -webkit-animation-name: anim_slides3;    
}

As you can see, the time of opacity:1 for each animation is just 20% of the animation-duration. To build those keyframes, you have to calculate carefully, otherwise the effect won't be as expected. Now, you can just change the animation-duration (which is used for all the animation) easily to change the frequency.

Updated Demo.

Answer 2

Seems you are have inverted the opacity animation order ...

http://jsbin.com/wipow/1/edit

@keyframes anim_slides {
    0%, 100% {opacity:1;}
    25%, 75% {opacity:0;}
}