Lightning Effect CSS
<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>