internet-explorer - CSS3 关键帧不会覆盖 FF 和 IE10 中的默认背景颜色

Question

在 chrome 中，这按预期工作:

“-webkit-animation: fadeBox 1s ease-in-out”覆盖了#lightbox{} 中的“background-color: rgba(255,255,255,.9)”。

但在 mozilla 和 ie10 中，#lightbox 中的“背景色:rgba(255,255,255,.9)”似乎覆盖了动画:fadeBox 4s ease-in-out；而且我没有得到淡入淡出的效果。

我必须在#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) }
}

Answer 1

您的问题是您的关键帧 CSS 不是有效的 CSS。特别是，在 IE 和 Mozilla 都使用的 @keyframes 中，您的 rgba() 只有三个参数，这对 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