CSS闪烁的星星

Question

我正在尝试将改进闪烁的星星放在长滚动主页的一张幻灯片中。我们现在拥有的闪光插件干扰了流畅的页面滚动。

我已经尝试了几个闪闪发光的插件，但没有一个适合我的需求。所以我正在尝试一个自定义解决方案。

我

用幻灯片的屏幕截图制作了一个大的星空 png，我将其放置在幻灯片中自己的div 的背景中。然后我无限淡入淡出div。

这工作得很好 - 现在我想让它看起来像不同的恒星出现在一个周期中。所以，当它淡出时，我所做的只是每次将图像翻转 180 度。（星星不会像原版那样移动，但它们看起来应该是原来的两倍，在交替的时间闪烁。

我现在的位置：我不知道如何让我的div 在每次不透明度设置为 0 时立即翻转 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; }
}