CSS slideshow doesn't work after the first loop -

i wanted learn tutorial messed things up... seems images in slideshow overlap after first loop. don't know why never shows first picture again. 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/

the problem if need repeated cycle of animation, cycle time of animations should equal. cycle time here total of animation-duration , animation-delay. can't set same animation-duration different animation-delays. in fact it's totally ok if right after first cycle, can remove animation-delay (set 0), of course done script.

so think should use same animation-duration (as cycle time) , set different animation-names (we need use different keyframes each animation). here 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 can see, time of opacity:1 each animation 20% of animation-duration. build keyframes, have calculate carefully, otherwise effect won't expected. now, can change animation-duration (which used animation) change frequency.

updated demo.