Transition 属性背景图片在 Firefox 上不工作（使用前缀）

Question

我有一个 div 当我将鼠标悬停在它上面时应该将背景图像从一个更改为另一个。它在 chrome 上完美运行，但在 Firefox 或 IE 上根本无法运行。

我已经检查了整个相关的 MDN 参考页面并尝试了几个不同的选项，但我找不到我的问题的答案所以我想在这里看看是否有人遇到过相同的行为，并最终知道解决方案。

在这里link看看发生了什么：http://codepen.io/thevalent/pen/RWqWGJ?editors=110

这是css方面：

#wrapper{
    background-image: url(dropText.png);
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 15em;
    border: 2px dashed #ccc;
    padding: 0px 0px;
    margin: 20px auto;
    opacity: 0.8;
    -moz-transition: background-image 0.4s  ease-in-out 1s;
    -webkit-transition: background-image 0.4s  ease-in-out 1s;
    transition: background-image 0.4s  ease-in-out 1s;
    -o-transition: background-image 0.4s  ease-in-out 1s;
  }
#wrapper:hover{
    -moz-transition: background-image 0.4s  ease-in-out 1s;
    -webkit-transition: background-image 0.4s  ease-in-out 1s;
    transition: background-image 0.4s  ease-in-out 1s;
    -o-transition: background-image 0.4s  ease-in-out 1s;
    background-image: url(uploadPic.png);
    opacity: 1;
  }

我尝试将背景图像属性替换为 "all"，但同样它只适用于 chrome。另外，正如您在上面的 link 中看到的那样，如果我将其更改为背景颜色，它也可以正常工作。

Answer 1

过渡应用于 可动画 属性，per the specification. The background-image property is not animatable, per the specification。因此，Firefox 和 Internet Explorer 都符合规范。 Chrome 可能正在探索 non-spec/proprietary 功能。

对于未来开发人员和设计人员应该如何转换图像，有一些想法。您可以通过阅读 CSS Image Transitions.

开始研究这些想法

Tab Atkins 在他的 Future of CSS 演示文稿中简要讨论了 cross-fade 函数。

Transition 属性背景图片在 Firefox 上不工作（使用前缀）

Transition property background-image not working on Firefox (using prefix)

html

css

firefox

transition

google-chrome

Transition 属性 背景图片在 Firefox 上不工作（使用前缀）

Transition property background-image not working on Firefox (using prefix)

html

css

firefox

transition

google-chrome

Transition 属性背景图片在 Firefox 上不工作（使用前缀）