我目前正在设计一个CSS“巨型下拉菜单”——基本上是一个常规的仅限CSS的下拉菜单，但包含不同类型的内容。
目前，CSS 3转换似乎不适用于“display”属性，也就是说，您不能进行从display：none到display：block（或任何组合）的任何转换。
当有人悬停在一个顶级菜单项上时，上面示例中的第二层菜单是否有办法“淡入”？
我知道你可以在visibility:属性上使用转换，但我想不出一种有效的方法。
我也尝试过使用高度，但那只是失败得很惨。
我也意识到，使用JavaScript实现这一点很简单，但我想挑战一下自己，只使用CSS，我觉得我做得有点短。
当前回答
此解决方案具有极好的兼容性，我还没有见过它：
.hidden-element {
position: absolute;
z-index: -1;
pointer-events: none;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity .5s ease-out;
}
.hidden-element.visible {
position: static;
z-index: auto;
pointer-events: auto;
visibility: visible;
opacity: 1;
}
说明：它使用了可见性：隐藏技巧（与“显示和动画”在一个步骤中兼容），但它使用了组合位置：绝对；z指数：-1；指针事件：无；以确保隐藏的容器不占用空间并且不响应用户交互。
其他回答
不使用显示，您可以将元素存储在“屏幕外”，直到您需要它，然后将其位置设置为您想要的位置，同时对其进行转换。然而，这带来了一系列其他设计问题，因此您的里程可能会有所不同。
无论如何，您可能不想使用显示，因为您希望屏幕阅读器可以访问内容，而屏幕阅读器在很大程度上试图遵守可见性规则-即，如果它不应该被眼睛看到，它就不会作为内容显示给代理。
我们可以使用transition delay属性来代替CSS中不存在的回调。
#selector {
overflow: hidden; /* Hide the element content, while height = 0 */
height: 0;
opacity: 0;
transition: height 0ms 400ms, opacity 400ms 0ms;
}
#selector.visible {
height: auto; opacity: 1;
transition: height 0ms 0ms, opacity 600ms 0ms;
}
那么，这里发生了什么？
当添加了可见类时，高度和不透明度都会立即开始动画（0毫秒），尽管高度需要0毫秒才能完成动画（相当于display:block），不透明度需要600毫秒。移除可见类后，不透明度开始动画（0毫秒延迟，400毫秒持续时间），高度等待400毫秒，然后立即（0毫秒）恢复初始值（相当于显示：动画回调中无）。
注意，这种方法比使用可见性的方法要好。在这种情况下，元素仍然占据页面上的空间，并且并不总是合适的。
有关更多示例，请参阅本文。
我认为萨尔曼PK有最接近的答案。它可以通过以下CSS动画淡入或淡出项目。但是，显示属性不会平滑地设置动画，只有不透明度。
@-webkit-keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
如果你想让元素从显示块移动到不显示块，我看不出目前只使用CSS是可能的。您必须获得高度并使用CSS动画来降低高度。这在CSS中是可能的，如下面的示例所示，但要知道为元素设置动画所需的确切高度值是很困难的。
jsFiddle示例
CSS
@-webkit-keyframes pushDown {
0% {
height: 10em;
}
25% {
height: 7.5em;
}
50% {
height: 5em;
}
75% {
height: 2.5em;
}
100% {
height: 0em;
}
}
.push-down {
-webkit-animation: pushDown 2s forwards linear;
}
JavaScript
var element = document.getElementById("element");
// Push item down
element.className = element.className + " push-down";
在这种情况下不使用关键帧应用过渡的另一种方法是将元素的宽度设置为零，然后在悬停时取消设置
.className{
visibility:hidden;
opacity: 0;
transition: .2s;
width:0;
}
.className:hover{
visibility:visible;
margin-right: .5rem;
opacity: 1;
width:unset;
}
编辑：在本示例中未应用display none。
@keyframes hide {
0% {
display: block;
opacity: 1;
}
99% {
display: block;
}
100% {
display: none;
opacity: 0;
}
}
上面发生的是，99%的动画显示设置为阻止，而不透明度逐渐消失。在最后一刻，display属性设置为none。
最重要的一点是使用动画填充模式在动画结束后保留最后一帧：向前
.hide {
animation: hide 1s linear;
animation-fill-mode: forwards;
}
以下是两个示例：https://jsfiddle.net/qwnz9tqg/3/
