Question

在chrome中，这可以按预期工作：

＆＃34; -webkit-animation：fadeBox 1s easy-in-out＆＃34; overides＆＃34; background-color：rgba（255,255,255，.9）＆＃34;在#lightbox {}中。

但是在mozilla和ie10中似乎＆＃34;背景颜色：rgba（255,255,255，.9）＆＃34;在#lightbox中覆盖动画：fadeBox 4s easy-in-out;而且我没有得到褪色效果。

我必须有＆＃34; background-color：rgba（255,255,255，.9）＆＃34;在#lightbox中，所以关键帧完成后，背景颜色保持白色。

不知道如何为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

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

1 个答案: