Take the 2-minute tour ×

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.


    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;
share|improve this question
I think for some reason IE9 & FF doesnt support the gifs. may be I think you should try to create some sprites and put js SetInterval & keep changing the images but its nasty on the amount of sprites you have to put for smooth transition. –  uDaY Apr 27 '12 at 16:59
@uDaY - thanks for the suggestion. I'm actually using png's locally so I don't think that is it. I just grabbed those images off the web for demonstration's sake. I don't want to use js for this. I'd rather forego it completely than use js. –  mrtsherman Apr 27 '12 at 17:01
In the case of png's, have you tried to look at CSS Sprites? –  uDaY Apr 27 '12 at 17:03
@uDaY - yeah I just checked and file format doesn't matter. I'm aware of many ways to accomplish this. I am not looking for workarounds. I am looking for why this doesn't work. –  mrtsherman Apr 27 '12 at 17:04

2 Answers 2

up vote 9 down vote accepted

Found the answer in the MDN docs.



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

share|improve this answer

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.

share|improve this answer

Your Answer


