lightening strikes animation on webpage

hello, i need help;
ive used https://codepen.io/tmrDevelops/pres/jPayjd and basically copy pasted the code, but i need it to go over the whole page and i want to change the backround to invisible, so i basically only have the lightneing strikes.... can someone help me out?

CSS keyframes overlap despite animation timing

Being relatively new to coding, I have created an animated banner in HTML and CSS, and got everything to work properly. (I'm building this on a local system, so images are not uploaded to server but are on my computer).

The animation is one image come up first for a few seconds then quickly fades out, then second image comes in and fades out, the 3rd comes in and fades out, and all of this loos indefinitely.

The problem I have is that the second "slide" reappears at the same time as the 3rd, lasts longer, therefore delaying the beginning of the loop with the first slide.

Css fade animation on element show

i have this template http://t2themes.com/themes/workout/demo and im trying to animate a div the way the site animates every element, article etc but i cant find the correct code. If i use this code:

div.anim {
-webkit-animation: flipInX 1.2s 0s ease forwards;
-moz-animation: flipInX 1.2s 0s ease forwards;
-o-animation: flipInX 1.2s 0s ease forwards;
animation: flipInX 1.2s 0s ease forwards;
opacity: 0; }

Syndicate content