CSS 过渡仅适用于 FF Nightly (18.0a1)？答案

【问题标题】：CSS Transitions only work in FF Nightly (18.0a1)?CSS 过渡仅适用于 FF Nightly (18.0a1)？
【发布时间】：2012-09-21 15:53:31
【问题描述】：

我创建了一个简单的 CSS 过渡来将 div 旋转 360 度 in this page（光盘菜单），但它似乎只适用于 Firefox Nightly。我还在 Firefox 15（发布版本）和 Google Chrome 中进行了尝试。两者都只将图像向左移动一点，并在覆盖的文本周围显示一些图形伪影。这是与光盘相关的CSS（旋转的图像实际上是一个空的div，在真实的菜单div中设置了大小）：

#menuDisco {
    transition: all 0.8s;
    -webkit-transform: rotate(0deg);  
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    background: url("img/disco.png");
    background-size: 100% 100%;
    position: relative;
    top: 0%; left: 0%;
    width: 100%; height: 100%;
    color: rgba(0,0,0,0);
}
#menu:hover #menuDisco {
    transition: all 0.8s;
    -webkit-transform: rotate(360deg);  
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

【问题讨论】：

当前 firefox 中的过渡是否没有前缀？如果没有，添加 -moz-transition。

标签： css rotation css-transitions css-transforms

【解决方案1】：

确保包含所有前缀。 Transitions have been unprefixed 在 FF16 和 Opera 12.5 中。（-ms-transition 没有用，因为 IE9 不支持它并且 IE10 没有前缀）。

-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;

第二个样式声明中也不需要转换规则，因为它与第一个相同。

【讨论】：