Firefox、Opera 和 IE 的 CSS 过渡？

Question

我正在尝试让我的悬停过渡在 Opera 和 Firefox 中工作。它在 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;
}

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

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