Why won't my animation repeat properly? - css

Question

Here it is on JS fiddle
http://jsfiddle.net/VR7AN/
I have made a simple animation with the basic principles of this guide: http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/
The animation runs perfectly the first time, but when it loops it turns grey and only cycles through some of the images. I can't figure out why the loop would work but not the same as the first time.
Here's my css:
#fadethru > img {
position: absolute;
color: transparent;
top: 0px;
left: 0px;
opacity: 0;
z-index: 0;
display: block;
-webkit-animation: imageAnimation 4.5s linear infinite 0s;
-moz-animation: imageAnimation 4.5s linear infinite 0s;
-o-animation: imageAnimation 4.5s linear infinite 0s;
-ms-animation: imageAnimation 4.5s linear infinite 0s;
animation: imageAnimation 4.5s linear infinite 0s;
animation-iteration-count: infinite;
}
#fadethru > img:nth-child(1) {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
-ms-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#fadethru > img:nth-child(2) {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
-ms-animation-delay: 1s;
animation-delay: 1s;
}
#fadethru > img:nth-child(3) {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
-o-animation-delay: 1.5s;
-ms-animation-delay: 1.5s;
animation-delay: 1.5s;
}
#fadethru > img:nth-child(4) {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
}
#fadethru > img:nth-child(5) {
-webkit-animation-delay: 2.5s;
-moz-animation-delay: 2.5s;
-o-animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
animation-delay: 2.5s;
}
#fadethru > img:nth-child(6) {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
#fadethru > img:nth-child(7) {
-webkit-animation-delay: 3.5s;
-moz-animation-delay: 3.5s;
-o-animation-delay: 3.5s;
-ms-animation-delay: 3.5s;
animation-delay: 3.5s;
}
#fadethru > img:nth-child(8) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
}
#fadethru > img:nth-child(9) {
-webkit-animation-delay: 4.5s;
-moz-animation-delay: 4.5s;
-o-animation-delay: 4.5s;
-ms-animation-delay: 4.5s;
animation-delay: 4.5s;
}
#-webkit-keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
15% { opacity: 1; animation-timing-function: ease-out; }
50% { opacity: 1 }
75% { opacity: 0 }
100% { opacity: 0 }
}
#-moz-keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
15% { opacity: 1; animation-timing-function: ease-out; }
50% { opacity: 1 }
75% { opacity: 0 }
100% { opacity: 0 }
}
#-o-keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
15% { opacity: 1; animation-timing-function: ease-out; }
50% { opacity: 1 }
75% { opacity: 0 }
100% { opacity: 0 }
}
#-ms-keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
15% { opacity: 1; animation-timing-function: ease-out; }
50% { opacity: 1 }
75% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
15% { opacity: 1; animation-timing-function: ease-out; }
50% { opacity: 1; }
75% { opacity: 0; }
100% { opacity: 0 }
}
and the HTML:
<div id="fadethru">
<img src="img/redjewel.png" id="red" alt="red jewel">
<img src="img/orangejewel.png" id="orange" alt="orange jewel">
<img src="img/yellowjewel.png" id="yellow" alt="yellow jewel">
<img src="img/grassjewel.png" id="grass" alt="green jewel">
<img src="img/greenjewel.png" id="green" alt="turquois jewel">
<img src="img/bluejewel.png" id="blue" alt="blue jewel">
<img src="img/indigojewel.png" id="indigo" alt="indigo jewel">
<img src="img/purplejewel.png" id="purple" alt="purple jewel">
<img src="img/pinkjewel.png" id="pink" alt="pink jewel">
</div>

Answer 1

You need to display each item only for the portion of the time of the total loop it takes up. So 9 displays / 100 percent = 11.11 percent of total loop time per element.
You have the elements displaying from 15-50% of the loop, so when it starts to repeat, some elements are covering others, but that doesn't work properly, so through that error you are seeing grey.
I did mine as 0-14%, lazily, and also only for chrome (which I use) so I didn't have to type all that code! But it should fix your issue:
#fadethru > img {
opacity:0;
position:absolute;
top:0; left:0;
-webkit-animation: imageAnimation 4.5s linear infinite 0s;
}
and
#-webkit-keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
8% { opacity: 1; animation-timing-function: ease-out; }
9% { opacity: 1 }
14% { opacity: 0 }
100% { opacity: 0 }
}