Three images changing with keyframe animation css3 - image

Question

I am new to CSS3 keyframe animations and I'm trying to create animation with three images, where each image would stay for 2 seconds, then change to 2nd image, which would stay 2 seconds as well and then change to the last 3rd image, which would also stay 2 seconds. This animation would then loop back to the first image...second...third...etc.
I have created the following Fiddle: http://jsfiddle.net/klarita/yyRQ8/
I know the stylesheet is a mess at the moment as I can't work it out, Could anyone advice please.
I will need to use the same technique for 6 images later on, just need to understand how it all works.
HTML:
<div id="crossfade">
<img src="http://farm6.staticflickr.com/5145/5576437826_940f2db110.jpg" alt="Image 1">
<img src="http://farm4.staticflickr.com/3611/3463265789_586ce40aef.jpg" alt="Image 2">
<img src="http://farm3.static.flickr.com/2657/5739934564_357f849b58_z.jpg" alt="Image 3">
</div>
CSS:
#crossfade > img {
width: 185px;
height: 185px;
position: absolute;
top: 100px;
left: 100px;
color: transparent;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 10s linear infinite 0s;
-moz-animation: imageAnimation 10s linear infinite 0s;
-o-animation: imageAnimation 10s linear infinite 0s;
-ms-animation: imageAnimation 10s linear infinite 0s;
animation: imageAnimation 10s linear infinite 0s;
}
#crossfade > img:nth-child(2) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
#crossfade > img:nth-child(3) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
#-webkit-keyframes imageAnimation {
0% { opacity: 1;
-webkit-animation-timing-function: ease-in; }
50% { opacity: 0;
-webkit-animation-timing-function: ease-out; }
100% { opacity: 1 }
}
#-moz-keyframes imageAnimation {
0% { opacity: 1;
-webkit-animation-timing-function: ease-in; }
50% { opacity: 0;
-webkit-animation-timing-function: ease-out; }
100% { opacity: 1 }
}
#-o-keyframes imageAnimation {
0% { opacity: 1;
-webkit-animation-timing-function: ease-in; }
50% { opacity: 0;
-webkit-animation-timing-function: ease-out; }
100% { opacity: 1 }
}
#-ms-keyframes imageAnimation {
0% { opacity: 1;
-webkit-animation-timing-function: ease-in; }
50% { opacity: 0;
-webkit-animation-timing-function: ease-out; }
100% { opacity: 1 }
}
#keyframes imageAnimation {
0% { opacity: 1;
-webkit-animation-timing-function: ease-in; }
50% { opacity: 0;
-webkit-animation-timing-function: ease-out; }
100% { opacity: 1 }
}