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

Posted 2023-03-06

【中文标题】Firefox 的背景图像的 CSS3 过渡不起作用

【英文标题】：CSS3 transition of background-image for Firefox not working

【发布时间】：2012-05-08 10:39:52

【问题描述】：

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

【问题讨论】：

我认为出于某种原因 IE9 和 FF 不支持 gif。可能我认为您应该尝试创建一些精灵并放置js SetInterval 并不断更改图像，但它对您必须放置的精灵数量以实现平滑过渡非常不利。

@uDaY - 感谢您的建议。我实际上在本地使用 png，所以我认为不是这样。为了演示，我只是从网上抓取了这些图像。我不想为此使用js。我宁愿完全放弃它也不愿使用js。

在 png 的情况下，您是否尝试过查看 CSS Sprites？

@uDaY - 是的，我刚刚检查过，文件格式无关紧要。我知道有很多方法可以做到这一点。我不是在寻找解决方法。我正在寻找为什么这不起作用。

【参考方案1】：

在 MDN 文档中找到答案。

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

背景图片

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

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

【参考方案2】：

现在是 2014 年，background-image 属性仍然不能设置动画： http://dev.w3.org/csswg/css-backgrounds/#background-image

在 webkit 中可以正常工作，但在 Firefox 中不行。似乎制作一些动画的唯一方法是为 Firefox 使用 jQuery fallback。