CSS3 transition of background-image for Firefox not working
css, css-transitions, firefox
Solution
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).
Problem
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; } ```