CODEWITHSUNDEEP
internet-explorerfirefoxcsscss-transitionscss-animations
dman
dman

Reputation: 11073

CSS3 Keyframes Do Not Override default background color in FF and IE10

In chrome, this works as intended:

"-webkit-animation: fadeBox 1s ease-in-out" overides "background-color: rgba(255,255,255,.9)" in #lightbox{}.

But in mozilla and ie10 it seems that "background-color: rgba(255,255,255,.9)" in #lightbox overides the animation: fadeBox 4s ease-in-out; and I don't get the fade effect.

I have to have "background-color: rgba(255,255,255,.9)" in #lightbox so when the keyframes are done the background color remains white.

Not sure what to do about this for firefox and 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) }
}

Upvotes: 1

Views: 1059

Answers (1)

Boris Zbarsky
Boris Zbarsky

Reputation: 35084

Your problem is that your keyframe CSS is not valid CSS. In particular, in your @keyframes, which both IE and Mozilla are using, your rgba() has only three arguments, which is not valid for rgba().

Note that the web console in Firefox tells you about your errors:

[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

Upvotes: 2

Related Questions