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;
}

同样适用于使用 -o- 作为其前缀的歌剧。至于 IE，不确定它是否支持 css 转换，您需要在 MDN 进行检查。或 caniuse等

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