火狐背景图像的CSS3转换不起作用

Question

我的背景-图像转换在Chrome中工作得很好，但在Firefox中却不起作用。我是CSS3转换的新手。我做了研究，我的语法似乎是正确的。据我所知，FF应该支持这一点。我在FF 12.0。为什么这个CSS3转换在火狐中不起作用。

没有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

background-image

这仍然有点悬而未决，在当前的工作草案中“只有渐变”，在当前的编辑草案中根本没有背景图像，在CSS背景和边框模块第3级编辑草案中的背景图像为“Animatable: no”。然而，Chrome 19 Canary中已经出现了支持，这也是设计者想要的。在得到广泛支持之前，这可以通过图像精灵和背景位置或不透明度来伪造。

现在我发现还没有人真正支持渐变(Chrome17，FF12，IE9)。只有Chrome支持背景图像(这就是为什么它在FF中对我不起作用)。

Answer 2

这是2014年，背景图像属性仍然无法设置动画：http://dev.w3.org/csswg/css-backgrounds/#background-image

在webkit中运行良好，但在Firefox中就不行了。似乎制作动画的唯一方法就是使用火狐的jQuery fallback。