CSS 闪烁的星星答案

【问题标题】：CSS twinkling starsCSS 闪烁的星星
【发布时间】：2016-06-05 22:09:30
【问题描述】：

我正在尝试在长滚动主页的一张幻灯片中添加闪烁的星星。我们现在拥有的 sparkles 插件正在干扰流畅的页面滚动。

我尝试了几个 sparkle 插件，但没有一个适合我的需要。所以我正在尝试自定义解决方案。

我从幻灯片的屏幕抓图制作了一个大型星空 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); }    
}

【问题讨论】：

标签： css animation css-transforms

【解决方案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; }
}

【讨论】：