CSS 过渡在 webkit 中工作，但在 FF 中不工作答案

【问题标题】：CSS transition working in webkit but not in FFCSS 过渡在 webkit 中工作，但在 FF 中不工作
【发布时间】：2011-12-25 07:51:54
【问题描述】：

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

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 中也很有效。

【问题讨论】：

您如何定义“正确”？请注意，visibility 是一个离散属性，因此定义它应该如何转换很复杂。该规范一直在变化，实现可能彼此不匹配或与当前规范不匹配。
“正确”，如我发布的链接中一样（顺便说一句，它在 FF 中使用非常相似的代码......）。我同意您的观点，该规范尚未“建立”，但作为我链接到的示例（即使在 FF 中），肯定还有其他内容。
你能发布一个实际的页面，显示上面的 CSS 应用于你的 HTML 吗？

标签： css firefox google-chrome webkit css-transitions

【解决方案1】：

你的时间声明太多了：

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

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

See here, with your code and with the last time removed.

【讨论】：

嗯不适合我，为什么要这样？最后的时间是延迟，我想这两个属性可能不同，我也尝试了非速记属性，但结果相同。我不确定是否可以通过这种方式转换孩子 (>)...

【解决方案2】：

由于这是一个 CSS3 函数，我认为它在 Firefox 中仍然不是一个有效的功能。查看this 页面底部的兼容性表...尝试升级您的浏览器或使用其他转换。

【讨论】：