title: CSS twinkling stars
body: <p>I am trying to put improve twinkling stars in one slide of a long-scrolling homepage. The sparkles plugins we've got now are interfering with the smooth page scrolling.</p>
  
  <p>I've tried several sparkle plugins and none suited my needs. So I'm trying a custom solution.</p>
  
  <p>I've made a large starfield png from a screengrab of the slide, which I place in the background of its own div in the slide. Then I fade the div in and out infinitely.</p>
  
  <p>This works fine - now I want to make it look like different stars appear in a cycle. So, while it's faded out, all I do is flip the image 180 degrees each time. (The stars won't move like in the original, but they should look like there are twice as many, twinkling at alternating times.)</p>
  
  <p>Where I am now: I don't know how to get my div to instantly flip 180 degrees each time its opacity is set to 0. Right now, it eases. It should flip instantly, while the div's opacity is 0, so you don't see it.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>(Got to get it working in FF and IE as well, but first things first.)</p>
  
  <pre><code>.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); }    
  }
  </code></pre>