CSS Transitions 仅适用于 FF Nightly (18.0a1)？

Question

我创建了一个简单的 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);
}

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

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