雷効果CSS

Question

編集： 私は基本的にこのWebページが示す結果を達成しようとしています。 http://codepen.io/Chrislion_me/pen/rVqwbO

私はHTML/CSSの世界全体ではかなり新しいです。 私はuniでプロジェクトのためにやっていることは、背景に雷の嵐の写真があり、画像の一部をフィルタリングするオーバーレイで覆われているホームページを作成することです。Picture of current website

基本的に写真はそのままの状態で固定しなければならないので、ページをさらにスクロールしてもそのような動きはしません[静止ライトニングストーム] [2]。

これは完全にうまくいきます。問題は、雷の嵐が正しく働くことができません。嵐は〜8秒ごとに数回点滅することを意味します。

コードの再生方法によっては、通常は白くなり、約8秒ごとに画像が点滅して再び白くなります。 どこが間違っているのか分かりませんが、もし私が助けてくれれば、私のコードの一部を掲載しました - それはイメージとボタンをホストするセクションです。

ありがとうございます！ :)

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

アニメーションのためのあなたのCSSの問題がいくつかあります。特にキーフレーム。

キーフレームの場合、from{}とto{}を使用すると、「開始」と「終了」と同じです。 の間にパーセンテージを使用することはできません。あなたはそのルートに行くときに使うことができるすべてからです。 from{}とto{}を使用している場合、「中」のステップはありません。

キーフレームにパーセンテージを使用する場合は、すべての手順がパーセンテージである必要があります。したがって、from()を使用するのではなく、to{}の代わりに0%を使用し、100%を使用します。

すべてのパーセンテージが90％の範囲に設定されていて、アニメーションが10秒間であるため、不透明度が0％から約11秒（2秒遅れ、その後9アニメーションの秒数）、画像はただ透明で、何もないように見えます。パーセンテージをに変更すると、アニメーションの開始時に点滅してから、不透明なイメージで終了すると、これがかなり役に立ちます。

は、最終的には変更は単にキーフレームを微調整に降りてきた：

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

を将来的には、それはあなたがあなたの問題のjsFiddleを設定することができれば役に立つ答えを得るために、多くの場合簡単です。

jsFiddle here私はあなたの画像にアクセスできないため、修正されたキーフレームと異なる画像を作成しました。