Firefox 背景图像的 CSS3 过渡不起作用

Question

我的背景图像过渡在Chrome中工作正常，但在Firefox中没有任何作用。我是 CSS3 过渡的新手。做了研究，我的语法似乎是正确的。从我所读到的内容来看，FF 应该支持这一点。我使用的是FF 12.0。为什么这个CSS3过渡在Firefox中不起作用。

没有JavaScript。没有解决方法。只是解释一下为什么会失败就太好了。

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;
}

Answer 1

在 MDN 文档中找到了答案。

http://oli.jp/2010/css-animatable-properties/#background-image

背景图像

这仍然有点悬而未决，"只有渐变"在 当前工作草案，当前完全没有背景图像 编辑器草稿，以及 CSS 中背景图像的"动画：否" 背景和边框模块级别 3 编辑草稿。然而 Chrome 19 Canary中出现了支持，这是 设计师想要。在广泛的支持到来之前，这可以通过 图像精灵和背景位置或不透明度。

目前我发现没有人真正支持渐变（Chrome 17，FF 12，IE9）。只有Chrome支持背景图像（这就是为什么它对我来说在FF中不起作用的原因）。

Answer 2

现在是 2014 年，背景图像属性仍然不可动画化：http://dev.w3.org/csswg/css-backgrounds/#background-image

在webkit中工作正常，但在Firefox中不能。似乎制作一些动画的唯一方法是使用火狐的jQuery回退。