transition for background-image in firefox?
You can do that using 2 pseudo elements
CSS
.test
{
width: 400px;
height: 150px;
position: relative;
border: 1px solid green;
}
.test:before, .test:after {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 1;
}
.test:before {
background-color: red;
z-index: 1;
transition: opacity 1s;
}
.test:after {
background-color: green;
}
.test:hover:before {
opacity: 0;
}
fiddle with real images
(hover to transition)
To be able to see the div content, the pseudo elements need to be in negative z-index:
fiddle with corrected z-index
looks like IE won't trigger this hover
.test:hover:before {
opacity: 0;
}
but will trigger this one
.test:hover {
}
.test:hover:before {
opacity: 0;
}
(As SILLY as it seems)
fiddle for IE10
CSS3 fade background image animation - Firefox
Unfortunately, Firefox can’t transition background-image.. So you have to do it another way.
Here is another stackoverfow question related to your problem, with some alternatives. :
CSS3 background image transition
CSS3 animation background not work on firefox
You can use a :pseudo element to add a background-image
and change its opacity
demo - https://jsfiddle.net/4x3k7Lxy/4/
background-image for firefox in CSS3 animations
If you're asking about the lack of cross-fade interpolation between different images, that's a very new addition to the spec that's not widely supported yet.
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.
css3 transition on background image doesn't work in Firefox
As far as I know, there is no suport in any browser to swap images smoothly in one single element in css.
After you do what you need, make sure you take a look into performance, your workaround is not as much as efficient as it could. In this code
$("#wallpaper").addClass("wallpaper_" +
$("#select_category").val()).css('opacity','0').animate({opacity:'1'});
,
the browser will take every single step until.animate({opacity:'1'})
.
For instance, the browser first has to find $("#wallpaper")
then, it will call for .addClass("wallpaper_" + ...);
and concatenate the result from finding $("#select_category")
then getting .val()
and so on. everytime this function is called, it will iterate through every single of these objects, so it is not as efficient as probably could and with two more animations in the page, it may became a bit laggy, if possible, use animations through CSS.
Anyway, what I sugest you to do is (if i'm right about what you want), just do what's in here https://jsfiddle.net/bmjg5g9s/
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>
Related Topics
Styling Checkboxes, Radio Buttons and Dropdowns
Hover and Click on CSS Triangle
Absolutely Positioning with Flexbox in Safari
My Svg Image Ignores Its Stylesheet When Used as Background Image
How to Decrease Navbar Height in Bootstrap 3
Internet Explorer 8 Shows Gradient Instead of Background Image
How to Select Multiple Elements That Are Children of Given Element
Using Transform: Scale Results in Blurry Images
Text Blurry After 3D Transform
How to Make a Text Stroke with Transparent Text
How to Make Bootstrap Responsive Design Work with Dotnetnuke
CSS Nth-Child Apply Odd-Even Rule But Switch Every 4 Items
Footer Consisting of Two Right Triangles
How to Apply CSS to HTML5 Custom Elements