CSS闪烁的星星

Question

我试图把改善闪烁的星星放在一个长滚动主页的幻灯片中。我们现在拥有的火花插件正在干扰平滑的页面滚动。

我试过几个火花插件，但没有一个适合我的需要。所以我在尝试一个定制的解决方案。

我从幻灯片的屏幕抓取中制作了一个大的星场png，我把它放在幻灯片中它自己的div的背景中。然后我无限地淡入和淡出。

这很好，现在我想让它看起来像不同的恒星出现在一个周期。所以，当它消失的时候，我所做的就是每次翻转这个图像180度。(星星不会像原来的那样运动，但它们的数量应该是原来的两倍，在交替的时候闪烁。)

我现在的位置:我不知道当它的不透明度设置为0时，如何使我的div立即翻转180度。现在，一切都结束了。它应该立即翻转，而div的不透明度是0，所以你看不到它。

我做错了什么？

(必须让它在FF和IE中运行，但首先要做的是。)

.scene-3 .bg {

    background-image: url('assets/starfield.png');
    background-repeat: repeat;
    width:100%;
    height: 100%;

    -webkit-animation: pulsate 3s ease-out;
    -webkit-animation: **flip 6s**;
    -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes pulsate {
    0% { opacity: 0.0; }
    50% { opacity: 1.0; }
    100% { opacity: 0.0; }
}
@-webkit-keyframes **flip** {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(180deg); }    
}

Answer 1

好吧，我找到了一种更残忍但可靠的方法。

我制作了两个层，手动地在其中一个层上翻转图像，然后简单地淡出其中的一个。

<div class="scenes scene-3">
    <div class="bg1"></div>
    <div class="bg2"></div>
</div>

.scene-3 .bg1 {
    position: absolute;
    background-image: url('/assets/needls/img/illustration/starfield.png');
    background-repeat: repeat;
    width:100%;
    height: 100%;
}

.scene-3 .bg2 {
    position: absolute;
    background-image: url('/assets/needls/img/illustration/starfield.png');
    background-repeat: repeat;
    width:100%;
    height: 100%;
    transform: scaleX(-1); 
    animation: pulsate 2s ease;
    animation-iteration-count: infinite; 

    -webkit-transform: scaleX(-1,-1);
    -webkit-animation: pulsate 2s ease;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0.5;
}

@keyframes pulsate  {
    0% { opacity: 0.0; }
    50% { opacity: 1.0; }
    100% { opacity: 0.0; }
}

@-webkit-keyframes pulsate {
    0% { opacity: 0.0; }
    50% { opacity: 1.0; }
    100% { opacity: 0.0; }
}