Background-image in keyframe does not display in Firefox or Internet Explorer
As per the specs, background-image
is not an animatable or a transitionable property. But it does not seem to say anything about what or how the handling should be when it is used as part of transition or animation. Because of this, each browser seem to be handling it differently. While Chrome (Webkit) is displaying the background image, Firefox and IE seem to do nothing.
The below quote found in an article at oli.jp provides some interesting information:
While CSS Backgrounds and Borders Module Level 3 Editor’s Draft says “Animatable: no” for background-image at the time of writing, support for crossfading images in CSS appeared in Chrome 19 Canary. Until widespread support arrives this can be faked via image sprites and background-position or opacity. To animate gradients they must be the same type.
On the face of it, it looks like Firefox and IE are handling it correctly while Chrome is not. But, it is not so simple. Firefox seems to contradict itself when it comes to how it handles transition on background image as opposed to animation. While transitioning background-image
, it shows up the second image immediately (hover
the first div
in the snippet) whereas while animating, the second image doesn't get displayed at all (hover
the second div
in the snippet).
So, conclusion is that it is better to not set background-image
inside keyframes. Instead, we have to use background-position
or opacity
like specified @ oli.jp.
div { background-image: url(https://placehold.it/100x100); height: 100px; width: 100px; margin: 10px; border: 1px solid;}div:nth-of-type(1) { transition: background-image 1s ease;}div:nth-of-type(1):hover { background-image: url(https://placehold.it/100/123456/ffffff);}div:nth-of-type(2):hover { animation: show-img 1s ease forwards;}@keyframes show-img { to { background-image: url(https://placehold.it/100/123456/ffffff); }}
<div></div><div></div>
CSS3 keyframe animation not working in Firefox
Firefox doesn't support background-position-x
or background-position-y
, that's why you cannot animate a single background axis on this browser.
CSS3 animation and background-image in Firefox
The ability to interpolate between background images is a pretty new proposal so far, and not well supported in browsers. Firefox doesn't implement it yet.
Why isn't this CSS3 animation working in Firefox and Internet Explorer?
You need to correct the typo :
inside the keyframes
Check fiddle here
#center .box{
width:100px;
height:100px;
margin:0 auto;
background-color:black;
-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: infinite; /*Végtelen újrajátszás */
-moz-animation: myfirst 5s; /*Mozilla*/
-moz-animation-iteration-count: infinite;
animation: myfirst 5s; /*Explorer*/
animation-iteration-count: infinite;
}
@-webkit-keyframes myfirst{
from{background:black;}
to{background:yellow;}
}
@-moz-keyframes myfirst{
from{background:black;}
to{background:yellow;}
}
@keyframes myfirst {
from{background:black;}
to{background:yellow;}
}
CSS3 keyframe animation not working in firefox and IE
Remove the double quotes from the animation name (rotate
instead of "rotate"
).
Then it will work:
Running demo
-webkit-animation-duration: 4s;
-webkit-animation-timing-function: linear;
-webkit-animation-name:rotate;
-webkit-animation-iteration-count: infinite;
-moz-animation-duration: 4s;
-moz-animation-timing-function: linear;
-moz-animation-name:rotate;
-moz-animation-iteration-count: infinite;
-ms-animation-duration: 4s;
-ms-animation-timing-function: linear;
-ms-animation-name:rotate;
-ms-animation-iteration-count: infinite;
-o-animation-duration: 4s;
-o-animation-timing-function: linear;
-o-animation-name:rotate;
-o-animation-iteration-count: infinite;
animation-duration: 4s;
animation-timing-function: linear;
animation-name:rotate;
animation-iteration-count: infinite;
Remember, the non-prefixed properties must always be the last, after the vendor specific.
P.S: In case you don't know, there are sites that prefix your code at compile-time (like Prefixr), or even at run-time (like prefix-free).
Btw +1, your animation is pretty :)
Related Topics
How to Vertically Center ≪Div≫ Inside the Parent Element With Css
Child With Max-Height: 100% Overflows Parent
Css3'S Attr() Doesn't Work in Major Browsers
Css Media Queries: Max-Width or Max-Height
Css Selector Based on Element Text
Css Only Pie Chart - How to Add Spacing/Padding Between Slices
Center a Position:Fixed Element
Add Bootstrap Glyphicon to Input Box
Css3 Transition Animation on Load
How to Add a Color Overlay to a Background Image
Truncating Long Strings With Css: Feasible Yet
How to Make Multiple Divs Display in One Line But Still Retain Width
How to Change Whole Page Background-Color in Angular
Bootstrap 4 Carousel Responsive (Image and Text)
Css Hover Drop Down Menu Disappears When Trying to Select Menu Option