html - Lightning Effect CSS

Question

EDIT: I'm basically trying to achieve the result that this web page demonstrates. http://codepen.io/Chrislion_me/pen/rVqwbO

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 Picture of current website.

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].

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.

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.

Thanks in advance! :)

HTML

<div id="bg" class="banner flashit">
<p>TEST TEXT</p>
<ul class="actions">
<li><a href="#" class="button special big">Click here</a></li>
</ul>
</div>

CSS

#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; }
}

Answer 1

There are a couple of issues with your CSS for the animation. Specifically the keyframes.

In keyframes, if you use from{} and to{} these are the same as "start" and "end". You can't also use percentages in between. From and to are all you can use when going that route. There can be no "middle" steps when using from{} and to{}.

If you want to use percentages for keyframes, all steps need to be a percentage. So rather than using from(), use 0% and instead of to{}, use 100%.

On top of this, since you had all the percentages set to the 90% range and the animation is 10 seconds long, starting from 0% opacity, there was a period of about 11 seconds (2 second delay, then 9 seconds of the animation) where the image is just transparent and it appears as though nothing's there. Changing the percentages to start the flashing at the beginning of the animation then ending on an opaque image helps this considerably.

Ultimately alterations merely came down to tweaking the keyframes:

@-webkit-keyframes flash {
    0% { opacity: 1; } 
    2% { opacity: 0; }
    3% { opacity: 0.6; }
    4% { opacity: 0.2; }
    6% { opacity: 0.9; } 
    100% { opacity: 1; }
}
@keyframes flash {
    0% { opacity: 1; } 
    2% { opacity: 0; }
    3% { opacity: 0.6; }
    4% { opacity: 0.2; }
    6% { opacity: .9; } 
    100% { opacity: 1; }
}

In the future it's often easier to get helpful answers if you can set up a jsFiddle of your issue.

I've created a jsFiddle here with the modified keyframes, and different images since I don't have access to your images.