5

我的背景图像转换在 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;
}
4

2 回答 2

11

在 MDN 文档中找到了答案。

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

背景图片

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

此时我发现实际上没有人支持渐变（Chrome 17、FF 12、IE9）。只有 Chrome 支持背景图像（这就是为什么它在 FF 中对我不起作用的原因）。

于 2012-04-27T20:05:37.797 回答
1

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.

于 2014-10-26T12:34:56.877 回答