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
CSS transition fade background image does not work in IE and Firefox
background-image
is not an animatable property (W3.org).
As you've noticed, certain browsers have implemented support for it anyway (Chrome, Safari, Opera), but you'll have to create a solution that's compatible with all the browsers you need. This is typically achieved by layering images on top of one another and fading between them with opacity
.
Background-Image Transition Not Working On Firefox
Demo : http://jsfiddle.net/lotusgodkk/GCu2D/242/
CSS:
* {
margin: 0;
padding: 0;
}
#nav li:hover {
-webkit-animation: NAME-YOUR-ANIMATION 500ms;
/* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION 500ms;
/* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION 500ms;
/* Opera 12+ */
animation: NAME-YOUR-ANIMATION 500ms;
/* IE 10+, Fx 29+ */
}
#nav {
width: 400px;
margin: 40px auto;
}
#nav li {
list-style-type:none;
font-size:2em;
}
#nav li a {
background-image:url('http://css-tricks.com/examples/CSS-Sprites/Example1After/img/image_nav.gif');
background-repeat:no-repeat;
padding: 0 0 0 90px;
display: block;
height: 72px;
}
#nav li a.item1 {
background-position:0px 0px;
}
#nav li a:hover.item1 {
background-position:0px -72px;
}
#nav li a.item2 {
background-position:0px -143px;
}
#nav li a:hover.item2 {
background-position:0px -215px;
}
#nav li a.item3 {
background-position:0px -287px;
}
#nav li a:hover.item3 {
background-position:0px -359px;
}
#nav li a.item4 {
background-position:0px -431px;
}
#nav li a:hover.item4 {
background-position:0px -503px;
}
#nav li a.item5 {
background-position:0px -575px;
}
#nav li a:hover.item5 {
background-position:0px -647px;
}
@-webkit-keyframes NAME-YOUR-ANIMATION {
0% {
opacity: 1;
}
50% {
opacity:0.5;
}
100% {
opacity: 1;
}
}
@-moz-keyframes NAME-YOUR-ANIMATION {
0% {
opacity: 1;
}
50% {
opacity:0.5;
}
100% {
opacity: 1;
}
}
@-o-keyframes NAME-YOUR-ANIMATION {
0% {
opacity: 1;
}
50% {
opacity:0.5;
}
100% {
opacity: 1;
}
}
@keyframes NAME-YOUR-ANIMATION {
0% {
opacity: 1;
}
50% {
opacity:0.5;
}
100% {
opacity: 1;
}
}
HTML:
<ul id="nav">
<li><a class="item1" href="#" title="Some Link 1">Item 1</a>
</li>
<li><a class="item2" href="#" title="Some Link 2">Item 2</a>
</li>
<li><a class="item3" href="#" title="Some Link 3">Item 3</a>
</li>
<li><a class="item4" href="#" title="Some Link 4">Item 4</a>
</li>
<li><a class="item5" href="#" title="Some Link 5">Item 5</a>
</li>
</ul>
I used keyframes for animation. You can learn more about it here: http://css-tricks.com/snippets/css/keyframe-animation-syntax/
The example may not be perfect as per your needs but it can surely help you to achieve what you want.
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/
Related Topics
How to Make a Youtube Embedded Video a Full Page Width One
Font Size with Percentage Value (%) Not Scaling with Screen Size
Question Mark in The Middle of a Url Variable
Getting Rid of Bullet Points from <Ul>
Applying CSS for Only Parent But Not to Children
How to Have Attributes on Closing Tags
Jsf Vs HTML(Jsp) for Enterprise Portals UI Layer. Which One to Choose? and Why
Justify-Content: Space-Between Failing to Align Elements as Expected
Complete List of Reasons Why a CSS File Might Not Be Working
Dropdownlistfor Will Not Show The Correct Selection
CSS Position Element "Fixed" Inside Scrolling Container
How to Get The HTML5 Audio's Duration Time
Curved Lines Using Only HTML And/Or CSS
Custom Pinterest Button for Custom Url (Text-Link, Image, or Both)
When Multiple Instances of Same Images Are Embedded in an HTML, Does That Load The Image Once