CSS过渡在Webkit中有效，但在Firefox中无效

Question

我有一个下拉菜单的代码，子菜单上有一个过渡效果：

ul.menu ul {
        -moz-transition: visibility 0s linear .55s, opacity .55s linear 0s;
        -webkit-transition: visibility 0s linear .55s, opacity .55s linear 0s;
        -o-transition: visibility 0s linear .55s, opacity .55s linear 0s;
        transition: visibility 0s linear .55s, opacity .55s linear 0s;
        visibility: hidden;
        opacity: 0;}

ul.menu li:hover > ul {
        -moz-transition-delay:0s;
        -o-transition-delay:0s;
        -webkit-transition-delay:0s;
        transition-delay:0s;
        visibility: visible;
        opacity: 1; }

在Chrome中显示正常，但在Firefox（7.0.1）中未能正常显示：为什么呢？另一个元素上的背景颜色过渡效果正常，类似的过渡效果（www.greywyvern.com/?post=337，感谢该网站提供的灵感！）在FF中也能正常工作。

- teolives

---

你如何定义“正确”？请注意，visibility是一个离散属性，因此定义它应该如何过渡是很复杂的。规范一直在变化，实现可能不匹配彼此或当前规范。 - Boris Zbarsky

“Properly”指的是我发布的链接（顺便说一下，使用非常相似的代码在Firefox中也可以工作...）。我同意您的观点，规范尚未“确立”，但是由于我提供的示例可以正常工作（甚至在Firefox中），所以肯定还有其他原因。 - teolives

你能否发布一个实际的页面，展示上述CSS应用于你的HTML的效果？ - Boris Zbarsky

Answer 1

您有太多的时间声明：

-moz-transition: visibility 0s linear .55s, opacity .55s linear 0s;

如果您删除最后一个时间0s，它将按预期工作。

在这里查看，使用您的代码并删除最后一个时间。

- Kyle

---

嗯，对我没用，为什么要这样做呢？最后一个时间是延迟，我想两个属性的延迟可能不同，我也尝试了非简写属性，但结果相同。虽然我不确定是否可以通过这种方式转换子元素（>）... - teolives

Answer 2

由于这是一个CSS3功能，我认为在Firefox中它仍然不是一个可用的特性。请查看this页面底部的兼容性表格...尝试升级您的浏览器或使用转换的替代方案。

- Michiel