Firefox、Opera 和 IE 的 CSS 过渡

Question

我正在尝试让我的悬停过渡在歌剧和火狐中工作。 它在Chrome中工作正常，但我尚未在IE或Safari中验证它。我需要更改或添加吗？

#redbox a {
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.15s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: initial;
}
#redbox a:hover {background:#6C6C6C;}

Answer 1

你只在css中包含webkit的前缀，因此它在Chrome中运行良好，很可能在Safari中也是如此，但在其他任何地方都不能。您需要包含 Mozilla 供应商前缀才能使其在 Firefox 中工作：

#redbox a {
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.15s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: initial;
    -moz-transition-property: all;
    -moz-transition-duration: 0.15s;
    -moz-transition-timing-function: linear;
    -moz-transition-delay: initial;
}

使用-o-作为前缀的歌剧也是如此。至于IE，不确定它是否支持css转换，你需要在MDN或caniuse等上检查。

更新：正如下面的@BoltClock和@Boris Zbarsky所指出的，通常最好包括这些供应商特定规则的非前缀标准版本，具体取决于您要定位的浏览器/版本。