CSS3關鍵幀不覆蓋默認的背景色在FF和IE10

在Chrome中，此按預期工作：CSS3關鍵幀不覆蓋默認的背景色在FF和IE10

「-webkit-動畫：fadeBox 1S易於進出」會取代「背景色：RGBA（255,255,255 ，.9）「在#lightbox {}中。

但是在Mozilla和ie10中，#lightbox中的「background-color：rgba（255,255,255，.9）」似乎覆蓋了動畫：fadeBox 4s易於進出;我沒有得到淡化效果。

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

來源

2013-02-06 dman

嘗試增加'@ -MS-關鍵幀fadeBox'爲什麼是背景色紅在Firefox的關鍵幀？ – Dimser

我做了紅色只是爲了看看莫茲關鍵幀是否會生效，它不會。據我所知，ie10 doens不使用供應商前綴。 – dman

@Philip Jens Bramsted：d hee是正確的 - '@ -ms-keyframes'不存在，IE10使用前綴無關鍵幀。 – BoltClock

你的問題是你的關鍵幀CSS不是有效的CSS。尤其是，在您的@keyframes中，IE和Mozilla都在使用您的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

來源

2013-02-06 11:13:08

CSS3關鍵幀不覆蓋默認的背景色在FF和IE10

回答

相關問題