Question

我创建了一个简单的CSS过渡来旋转div 360度in this page（光盘菜单），但它似乎只适用于Firefox Nightly。我还试过Firefox 15（发布版本）和谷歌浏览器。两者都只将图像向左移动一点，并在上面的文本周围显示一些图形工件。这是与光盘相关的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

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

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

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

CSS Transitions只适用于FF Nightly（18.0a1）？

1 个答案: