title: Lightning Effect CSS
body: <p>EDIT:
  I'm basically trying to achieve the result that this web page demonstrates.
  <a href="http://codepen.io/Chrislion_me/pen/rVqwbO" rel="nofollow">http://codepen.io/Chrislion_me/pen/rVqwbO</a></p>
  
  <p>I'm pretty new to the whole HTML / CSS world.
  What I'm trying to do for a project at uni, is create a home page where there's a picture of a lightning storm in the background, covered by a overlay which is too filter out some of the picture <a href="http://i.stack.imgur.com/DlDue.jpg" rel="nofollow">Picture of current website</a>.</p>
  
  <p>Basically, the photo has to remain fixed where it is, so if I scrolled further down the page it doesn't move as such [Stationary Lightning Storm][2].</p>
  
  <p>So this is working perfectly fine, problem is, I can't get my lightning storm to work correctly, the storm is meant to flash a couple of times every ~ 8 seconds-ish. </p>
  
  <p>Depending on the way I play with the code, it usually just goes white and then every ~ 8 seconds it flashes the image and then goes white again.
  I'm not sure where I'm going wrong, I've posted part of my code below if that helps - it's just section that hosts the image and the buttons, I can post more CSS if that's needed.</p>
  
  <p>Thanks in advance! :)</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="bg" class="banner flashit"&gt;
  &lt;p&gt;TEST TEXT&lt;/p&gt;
  &lt;ul class="actions"&gt;
  &lt;li&gt;&lt;a href="#" class="button special big"&gt;Click here&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#bg{
     padding: 16em 0 13em 0;
     background-attachment: fixed;
     background-image: url("images/overlay.png"), url("../images/banner.jpg");
     background-position: center top;
     background-size: cover;
     line-height: 1.75;
     text-align: center;
     z-index: -2;
  }
  .banner {
      padding: 16em 0 13em 0;
      background-attachment: fixed;
      background-image: url("images/overlay.png"), url("../images/banner.jpg");
      background-position: center top;
      background-size: cover;
      line-height: 1.75;
      text-align: center;
      -webkit-filter: brightness(3);
      filter: brightness(3);
      -o-filter: brightness(3);
      -moz-filter: brightness(3);
      z-index: -1;
  }   
  .flashit{
      -webkit-animation: flash ease-out 10s infinite;
      -moz-animation: flash ease-out 10s infinite;
      animation: flash ease-out 10s infinite;
      animation-delay: 2s;
  }
  @-webkit-keyframes flash {
      from { opacity: 0; } 
      92% { opacity: 0; }
      93% { opacity: 0.6; }
      94% { opacity: 0.2; }
      96% { opacity: 0.9; } 
      to { opacity: 0; }
  }
  @keyframes flash {
      from { opacity: 0; } 
      92% { opacity: 0; }
      93% { opacity: 0.6; }
      94% { opacity: 0.2; }
      96% { opacity: 1; } 
      to { opacity: 0; }
  }
  </code></pre>