CSS3パルスアニメーションがIEとFFで動作しない

Question

私は無限ループするアニメーションの背景を得ました。それはChromeとSafariが完全に正常に動作します。しかし、それはIEとFFでもうまくいかない。私はこの話題に関する他の人の質問を見ようとしましたが、まだ分かりませんでした。

CSS

.background_slider { 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 5%; 
    z-index: -2; 
    } 

    .animatie_bg{ 
    animation: pulse 500s infinite; 
    -webkit-animation: pulse 500s infinite; 
    -ms-animation: pulse 500s infinite; 
    -o-animation: pulse 500s infinite; 
    -moz-animation: pulse 500s infinite; 
    } 

@keyframes pulse { 
    0% { 
    background: url('../images/background/bordaux.jpg'); 
    background-size: cover; 

    } 
    12% { 
    background: url('../images/background/bordaux.jpg'); 
    background-size: cover; 

    } 
    12% { 
    background: url('../images/background/deepblue.jpg'); 
    background-size: cover; 

    } 
    37% { 
    background: url('../images/background/green.jpg'); 
    background-size: cover; 

    } 
    62% { 
    background: url('../images/background/lightpink.jpg'); 
    background-size: cover; 

    } 
    100% { 
    background: url('../images/background/bordaux.jpg'); 
    background-size: cover; 

    } 
} 


@-moz-keyframes pulse { 
    0% { 
    background: url('../images/background/bordaux.jpg'); 
    background-size: cover; 

    } 
    12% { 
    background: url('../images/background/bordaux.jpg'); 
    background-size: cover; 

    } 
    12% { 
    background: url('../images/background/deepblue.jpg'); 
    background-size: cover; 

    } 
    37% { 
    background: url('../images/background/green.jpg'); 
    background-size: cover; 

    } 
    62% { 
    background: url('../images/background/lightpink.jpg'); 
    background-size: cover; 

    } 
    100% { 
    background: url('../images/background/bordaux.jpg'); 
    background-size: cover; 

    } 
} 


@-webkit-keyframes pulse { 
    0% { 
    background: url('../images/background/bordaux.jpg'); 
    background-size: cover; 

    } 
    12% { 
    background: url('../images/background/bordaux.jpg'); 
    background-size: cover; 

    } 
    12% { 
    background: url('../images/background/deepblue.jpg'); 
    background-size: cover; 

    } 
    37% { 
    background: url('../images/background/green.jpg'); 
    background-size: cover; 

    } 
    62% { 
    background: url('../images/background/lightpink.jpg'); 
    background-size: cover; 

    } 
    100% { 
    background: url('../images/background/bordaux.jpg'); 
    background-size: cover; 

    } 
} 

@-ms-keyframes fadeIn { 
    0% { 
    background: url('../images/background/bordaux.jpg'); 
    background-size: cover; 

    } 
    12% { 
    background: url('../images/background/bordaux.jpg'); 
    background-size: cover; 

    } 
    12% { 
    background: url('../images/background/deepblue.jpg'); 
    background-size: cover; 

    } 
    37% { 
    background: url('../images/background/green.jpg'); 
    background-size: cover; 

    } 
    62% { 
    background: url('../images/background/lightpink.jpg'); 
    background-size: cover; 

    } 
    100% { 
    background: url('../images/background/bordaux.jpg'); 
    background-size: cover; 

    } 
} 
@-o-keyframes fadeIn { 
    0% { 
    background: url('../images/background/bordaux.jpg'); 
    background-size: cover; 

    } 
    12% { 
    background: url('../images/background/bordaux.jpg'); 
    background-size: cover; 

    } 
    12% { 
    background: url('../images/background/deepblue.jpg'); 
    background-size: cover; 

    } 
    37% { 
    background: url('../images/background/green.jpg'); 
    background-size: cover; 

    } 
    62% { 
    background: url('../images/background/lightpink.jpg'); 
    background-size: cover; 

    } 
    100% { 
    background: url('../images/background/bordaux.jpg'); 
    background-size: cover; 

    } 
} 

HTML

<div class="background_slider animation_bg"></div> 

Answer 1

Ilya Strelsynの答えの後、私は代替案を探しに行った。この思い付いた：

CSS

.background_1 { 
    width: 102%; 
    height: 102%; 
    animation: BG_one 500s infinite; 
    position: fixed; 
    top: 5%; 
    z-index: -2; 
} 

.background_2 { 
    width: 102%; 
    height: 102%; 
    animation: BG_two 500s infinite; 
    position: fixed; 
    top: 5%; 
    z-index: -2; 
} 

.background_3 { 
    width: 102%; 
    height: 102%; 
    animation: BG_three 500s infinite; 
    position: fixed; 
    top: 5%; 
    z-index: -2; 
} 

.background_4 { 
    width: 102%; 
    height: 102%; 
    animation: BG_four 500s infinite; 
    position: fixed; 
    top: 5%; 
    z-index: -2; 
} 

@keyframes BG_one { 
    0%, 100% { 
    opacity: 1 
    } 
    12% { 
    opacity: 0.5 
    } 
    37% { 
    opacity: 0 
    } 
    62% { 
    opacity: 0 
    } 
    87% { 
    opacity: 0.5 
    } 
} 

@keyframes BG_two { 
    0%, 100% { 
    opacity: 0.5 
    } 
    12% { 
    opacity: 1 
    } 
    37% { 
    opacity: 0.5 
    } 
    62% { 
    opacity: 0 
    } 
    87% { 
    opacity: 0 
    } 
} 

@keyframes BG_three { 
    0%, 100% { 
    opacity: 0 
    } 
    12% { 
    opacity: 0 
    } 
    37% { 
    opacity: 0.5 
    } 
    62% { 
    opacity: 1 
    } 
    87% { 
    opacity: 0.5 
    } 
} 

@keyframes BG_four { 
    0%, 100% { 
    opacity: 0 
    } 
    12% { 
    opacity: 0 
    } 
    37% { 
    opacity: 0.5 
    } 
    62% { 
    opacity: 1 
    } 
    87% { 
    opacity: 0.5 
    } 
} 

HTML

<div class="background_1"><img alt="bordaux" src="images/background/bordaux.jpg"></div> 
    <div class="background_2"><img alt="deepblue" src="images/background/deepblue.jpg"></div> 
    <div class="background_3"><img alt="green" src="images/background/green.jpg"></div> 
    <div class="background_4"><img id="AJHSBD" alt="lightpink" src="images/background/lightpink.jpg"></div> 

ソリューションは、私が最初に持っていた同じ出力をしません。しかし、他のブラウザとの互換性がないため、これが最良の選択です。

さらにカスタマイズが可能です。

ありがとうございました！

Answer 2

残念ながら、あなたはbackground速記、is specified as not animatableてアニメーション化しようとするbackground-imageプロパティ、。 Blinkエンジンに基づいたブラウザ（ChromeやOperaなど）は、実験的なCSSの拡張機能としてアニメーションを実装していますが、それに頼ることはできません。回避策として、背景画像のスプライトを作成し、background-positionにsteps()イージング機能を適用してアニメートすることができます。

また、上記のコメントで指摘したように、あなたはCSSプロパティanimationと@keyframesブロックのため-moz-、-o-と-ms-プレフィックスを必要としません。 Firefoxは2012年にリリースされたバージョン15以降のプレフィックスをサポートしています.（IE9はそれをサポートしていませんでした。 Operaは現在Chromeと同じエンジンを使用していますが、古いエンジン（12.1x）の最後のバージョンでは未対応のアニメーションもサポートされています。