CSS中三个div之间的交叉淡入淡出

Question

我一直在研究三个不同图像之间的交叉淡入淡出以获得“闪烁”效果，但发现我实际上需要使用三个不同的 div 来执行此操作，以便可以使用“background-repeat”属性。问题是我似乎无法弄清楚如何修改代码以使用 div 而不是图像。

这是我一直在使用的处理图像的代码：

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;
}

和 HTML：

<div id="starrysky">
    <img src="arcticnomoon1.jpg;">
    <img src="arcticnomoon2.jpg">
    <img src="arcticnomoon3.jpg">
</div>

任何帮助将不胜感激！我希望能够在没有 jQuery 的情况下做到这一点，或者如果我必须，非常简单的 jQuery。 :\

Answer 1

嗯，你在正确的轨道上，你只是在#starrysky div中定位图像有点错误:)

这是一个例子

@-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>