Cross fading between three divs in CSS - html

Question

I've been working on cross-fading between three different images for a "twinkling" effect, but discovered I actually need to do this with three different divs so I can use the "background-repeat" property. The problem is I can't seem to figure out how to modify the code to work with divs instead of images.
Here's the code I've been using that works with images:
CSS:
#-webkit-keyframes twinkle {
from { opacity: 0; }
to { opacity: 1; }
}
#-moz-keyframes twinkle {
from { opacity: 0; }
to { opacity: 1; }
}
#keyframes twinkle {
from { opacity: 0; }
to { opacity: 1; }
}
#starrysky img {
position: top left fixed;
width:900px;
}
#starrysky img:nth-child(2) {
opacity: .9;
-webkit-animation: twinkle 1.25s ease-in alternate infinite;
-moz-animation: twinkle 1.25s ease-in alternate infinite;
animation: twinkle 1.25s ease-in alternate infinite;
transition-delay: 2s;
}
#starrysky img:nth-child(3) {
opacity: .9;
-webkit-animation: twinkle 1.75s ease-in alternate infinite;
-moz-animation: twinkle 1.75s ease-in alternate infinite;
animation: twinkle 1.75s ease-in alternate infinite;
transition-delay: 3s;
}
#starrysky img:nth-child(4) {
opacity: .7;
-webkit-animation: twinkle 2.5s ease-in alternate infinite;
-moz-animation: twinkle 2.5s ease-in alternate infinite;
animation: twinkle 2.5s ease-in alternate infinite;
transition-delay: 2s;
}
and HTML:
<div id="starrysky">
<img src="arcticnomoon1.jpg;">
<img src="arcticnomoon2.jpg">
<img src="arcticnomoon3.jpg">
</div>
Any help would be much appreciated! I'm hoping to be able to do this without jQuery, or if I must, very simple jQuery. :\

Answer 1

Well you are on the right track, you're just positioning the images in the #starrysky div a bit wrong :)
Here's an example
#-webkit-keyframes twinkle {
from { opacity: 0; }
to { opacity: 1; }
}
#-moz-keyframes twinkle {
from { opacity: 0; }
to { opacity: 1; }
}
#keyframes twinkle {
from { opacity: 0; }
to { opacity: 1; }
}
#starrysky {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
#starrysky img {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
#starrysky img{
opacity: .9;
-webkit-animation: twinkle 1.25s ease-in alternate infinite;
-moz-animation: twinkle 1.25s ease-in alternate infinite;
animation: twinkle 1.25s ease-in alternate infinite;
transition-delay: 2s;
}
#starrysky img:nth-child(2) {
opacity: .9;
-webkit-animation: twinkle 1.75s ease-in alternate infinite;
-moz-animation: twinkle 1.75s ease-in alternate infinite;
animation: twinkle 1.75s ease-in alternate infinite;
transition-delay: 3s;
}
<div id="starrysky">
<img src="http://www.southernhillsanimalhospital.com/sites/site-1450/images/kittens.jpg" />
<img src="http://dreamatico.com/data_images/kitten/kitten-2.jpg" />
</div>