Lightning Effect CSS

Question

EDIT: Ich versuche grundsätzlich, das Ergebnis zu erreichen, dass diese Webseite demonstriert. http://codepen.io/Chrislion_me/pen/rVqwbO

Ich bin ziemlich neu in der ganzen HTML/CSS-Welt. Was ich für ein Projekt bei uni versuche, ist eine Homepage zu erstellen, auf der im Hintergrund ein Bild eines Gewitters zu sehen ist, überdeckt von einer Überlagerung, die einige der Bilder aus dem Bild herausfiltert Picture of current website.

Im Grunde muss das Foto dort bleiben, wo es ist. Wenn ich also weiter nach unten blättert, bewegt es sich nicht so [Stationärer Blitzsturm] [2].

Das funktioniert also ganz gut, das Problem ist, ich kann meinen Blitzsturm nicht richtig funktionieren lassen, der Sturm soll ein paar Mal alle ~ 8 Sekunden blinken.

Abhängig von der Art, wie ich mit dem Code spiele, wird es normalerweise nur weiß und dann alle ~ 8 Sekunden blinkt es das Bild und wird dann wieder weiß. Ich bin nicht sicher, wo ich falsch liege, ich habe einen Teil meines Codes unten veröffentlicht, wenn das hilft - es ist nur Abschnitt, der das Bild und die Schaltflächen hostet, kann ich mehr CSS wenn es benötigt wird.

Vielen Dank im Voraus! :)

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

Es gibt ein paar Probleme mit der CSS für die Animation. Insbesondere die Keyframes. Wenn Sie from{} und to{} verwenden, sind diese in Keyframes dieselben wie "Start" und "Ende". Sie können nicht auch Prozentsätze dazwischen verwenden. Von und nach können Sie nur diese Route benutzen. Es kann keine "mittleren" Schritte geben, wenn from{} und to{} verwendet werden.

Wenn Sie Prozentsätze für Keyframes verwenden möchten, müssen alle Schritte ein Prozentsatz sein. Verwenden Sie also nicht from(), sondern 0% und anstelle von to{}100%.

Da alle Prozentsätze auf den Bereich von 90% eingestellt waren und die Animation 10 Sekunden lang war, gab es ab 0% Deckkraft einen Zeitraum von etwa 11 Sekunden (2 Sekunden Verzögerung, dann 9) Sekunden der Animation), wo das Bild nur transparent ist und es scheint, als wäre nichts da. Ändern Sie die Prozentzahlen auf Start das Blinken zu Beginn der Animation und endet dann auf einem undurchsichtigen Bild hilft dies erheblich.

letztlich nur kamen Änderungen nach unten den Keyframes zu zwicken:

@-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 Zukunft hilfreiche Antworten ist es oft einfacher, wenn man ein jsFiddle Ihre Ausgabe einrichten.

Ich habe eine jsFiddle here mit den geänderten Keyframes und verschiedenen Bildern erstellt, da ich keinen Zugriff auf Ihre Bilder habe.