Lightning Effect Css

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 t

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