CSS下拉菜单淡入过渡和显示

Question

我一直在做作业，看来你不能在使用display:none;和display:inline;等时使用CSS过渡效果。

我想在我的CSS下拉菜单中添加淡入淡出以使其看起来更清晰。使用我发现的显示元素时，这是不可能的。

我尝试从我的CSS中删除display，但是当我这样做时，元素就在那里（尽管不可见）并且当你将鼠标悬停在它上面时淡入淡出。我读了一个建议添加“pointer-events：none;”对此，这不是跨浏览器兼容的。如果再次将鼠标放在它上面，它还会导致淡入淡出元素闪烁。

我还使用CSS关键帧动画建议在使用显示元素时淡入，但是当鼠标离开时无法使其淡出。 ：（

我知道这是可能的，因为我在许多网站上都看过它，但我无法让它适合我的。

这是我的代码：

http://pastebin.com/zVQapUNz

Answer 1

我已经在jsfiddle.net

中编写了代码

http://jsfiddle.net/3PD7D/1/

当鼠标移过它时，这确实有效，你可以使用相同的概念来改变不透明度

from {opacity:1;}
to {opacity:0;}

隐藏菜单。然而，这将使透明背后的任何东西都是可见的但不可点击。我没有尝试过将display：none添加到最终动画帧时会发生什么。