My background-image transition is working fine in Chrome, but does nothing in Firefox. I am new to CSS3 transitions. Did research and my syntax seems to be correct. From what I have read FF should support this. I am on FF 12.0. How come this CSS3 transition does not work in Firefox.
No javascript. No workarounds. Just an explanation of why this is failing would be wonderful.
http://jsfiddle.net/VCdGt/3/
a.call_to_action
{
text-decoration: none;
display: block;
color: #232744;
font-size: 20px;
font-weight: bold;
height: 47px;
width: 185px;
overflow: hidden;
margin: 10px auto 15px auto;
text-align: center;
border: none;
background: yellow;
background-image: url(http://www.pslover.com/images/thumb/2751.jpg);
-webkit-transition: background-image .5s linear;
-moz-transition: background-image .5s linear;
}
a.call_to_action:hover {
background: orange;
background-image: url(http://www.tutorialdash.com/avatars/3b1f70c20325d8676ce1f56cb9b43f17.gif);
color: #4F4246;
}
Change your wallpaper from the menuIf you are on the homepage, tap Customize Homepage. If you are in a tab, tap Settings and then Homepage. Tap Wallpaper under Firefox Homepage. Tap the image you want to set as your opening screen wallpaper.
Found the answer in the MDN docs.
http://oli.jp/2010/css-animatable-properties/#background-image
background-image
This is still a little up in the air, with “only gradients” in the current Working Draft, no background-image at all in the current Editor’s Draft, and “Animatable: no” for background-image in CSS Backgrounds and Borders Module Level 3 Editor’s Draft. However, support has appeared in Chrome 19 Canary, and this is something that designers want. Until widespread support arrives this can be faked via image sprites and background-position or opacity.'
At this time I have found that nobody actually supports gradients (Chrome 17, FF 12, IE9). Only Chrome supports background-image (that's why it doesn't work in FF for me).
It is 2014 and background-image property is still not animatable: http://dev.w3.org/csswg/css-backgrounds/#background-image
Works fine in webkit but not in Firefox. It seems that the only way to make some animation is to use jQuery fallback for Firefox.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With