CSS 过渡不适用于 FireFox 和 IE [重复]答案

【问题标题】：CSS Transition is not working at FireFox and IE [duplicate]CSS 过渡不适用于 FireFox 和 IE [重复]
【发布时间】：2015-12-23 21:46:10
【问题描述】：

 css("transition", "background 0.5s linear")

上面的代码在点击事件完成后执行，页面的背景图片由A淡出变为B淡入。

在 Chrome 中，不仅上面的代码，而且所有其他代码都运行良好。

但是像上面这样的一些代码在某些浏览器上不起作用，尤其是，

我现在错过了什么问题？

【问题讨论】：

你为什么不使用提到的transition 创建一个新类并使用'addClass'添加该类名
page's background image is transformed 是背景图像甚至动画？
据我在this bug 背景图像转换中看到的：a) 是 CSS4 的东西； b) 没有在 Firefox 中实现
事实上，chrome（也许是 safari）似乎是唯一在背景图像上实现了过渡的浏览器
@JaromandaX 实际上，我们的东西是 css3。你的意思是 chrome 是唯一在背景图像上实现过渡的浏览器？是不是属于 CSS 而不是 Chrome？

【解决方案1】：

我认为你错过了 css 前缀。您可以从这里找到更多详细信息https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix

供应商通常使用这些前缀：

-webkit-（Chrome，Opera 的较新版本。）

-moz- (火狐)

-o-（旧版 Opera）

-ms- (Internet Explorer)

所以你应该添加带有css前缀的转换代码。

【讨论】：

您添加的链接中的“浏览器供应商”是什么意思？
在 Firefox 中“-moz-transition”。在 chrome -webkit-transition 中。在 IE -ms-transition
是的，使用它们。实际上，这些，例如 -mox-、-webkit- 创建了一种针对独特浏览器的黑客攻击
这里有更多细节。 http://www.w3schools.com/cssref/css3_browsersupport.asp
firefox 从 16.0 版开始不需要 -moz- 前缀，chrome 从 26.0 版开始不需要 -webkit- 前缀，safari 从 6 版开始，opera 不需要 - o- 前缀从 12.10 版本开始，Internet Explorer 从未使用 -ms- 前缀进行转换

【解决方案2】：

添加一个类，而不是使用 jquery 应用 css：

 .addClass("class-name")

.class-name {
    transition: background 0.5s linear;
}

【讨论】：