Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS3 transition of background-image for Firefox not working

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;
}
like image 481
mrtsherman Avatar asked Apr 27 '12 16:04

mrtsherman


People also ask

How do I change the background on Mozilla Firefox 2022?

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.


2 Answers

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).

like image 75
mrtsherman Avatar answered Sep 27 '22 22:09

mrtsherman


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.

like image 37
Yura Loginov Avatar answered Sep 27 '22 22:09

Yura Loginov