1

クロムでは、これは意図したとおりに機能します。

「-webkit-animation: fadeBox 1s ease-in-out」は、#lightbox{} の「background-color: rgba(255,255,255,.9)」をオーバーライドします。

しかし、mozilla と ie10 では、#lightbox の "background-color: rgba(255,255,255,.9)" がアニメーションを上書きしているようです。フェード効果が得られません。

#lightbox に "background-color: rgba(255,255,255,.9)" が必要なので、キーフレームが完了しても背景色は白のままです。

firefox と IE10 の場合、これについてどうすればよいかわかりません。

#lightbox {
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: rgba(255,255,255,.9); <-----DEFAULT COLOR AFTER ANIMATION IS DONE
    z-index: 150;
    background-size: cover;
    -webkit-animation: fadeBox 1s ease-in-out;
    -moz-animation: fadeBox 4s ease-in-out;
    animation: fadeBox 4s ease-in-out;
}

@-webkit-keyframes fadeBox {
    0% { background-color: rgba(255,255,255,.0) }
    100% { background-color: rgba(255,255,255,.9) }
}

@-moz-keyframes fadeBox {
    0% { background-color: red }
    100% { background-color: red }
}

@keyframes fadeBox {
    0% { background-color: rgba(255,255,255.0) }
    100% { background-color: rgba(255,255,255.9) }
}
4

1 に答える 1

2

問題は、キーフレーム CSS が有効な CSS ではないことです。特に、@keyframesIE と Mozilla の両方が使用してrgba()いる では、引数が 3 つしかなく、これは では有効ではありませんrgba()。

Firefox の Web コンソールにエラーが表示されることに注意してください。

[11:11:50.588] Expected an integer but found '255'.  Error in parsing value for 'background-color'.  Declaration dropped. @ file:///tmp/test.html:27
[11:11:50.588] Expected an integer but found '255.9'.  Error in parsing value for 'background-color'.  Declaration dropped. @ file:///tmp/test.html:28
于 2013-02-06T11:13:08.997 に答える