Question

我的背景图片转换在Chrome中正常运行，但在Firefox中无效。我是CSS3过渡的新手。研究和我的语法似乎是正确的。据我所知，FF应该支持这一点。我在FF 12.0上。为什么这个CSS3过渡在Firefox中不起作用。

没有javascript。没有解决方法。只是解释为什么失败会很精彩。

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年，background-image属性仍然无法动画： http://dev.w3.org/csswg/css-backgrounds/#background-image

在webkit中运行良好，但在Firefox中运行不正常。似乎制作动画的唯一方法是使用Firefox的jQuery后备。

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

2 个答案: