CODEWITHSUNDEEP
htmlcsscss-transitionscss-animationskeyframe
Lauren
Lauren

Reputation: 391

Cross fading between three divs in CSS

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. :\

Upvotes: 0

Views: 1731

Answers (1)

VilleKoo
VilleKoo

Reputation: 2854

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>

Upvotes: 2

Related Questions