我目前正在设计一个CSS“巨型下拉菜单”——基本上是一个常规的仅限CSS的下拉菜单，但包含不同类型的内容。
目前，CSS 3转换似乎不适用于“display”属性，也就是说，您不能进行从display：none到display：block（或任何组合）的任何转换。
当有人悬停在一个顶级菜单项上时，上面示例中的第二层菜单是否有办法“淡入”？
我知道你可以在visibility:属性上使用转换，但我想不出一种有效的方法。
我也尝试过使用高度，但那只是失败得很惨。
我也意识到，使用JavaScript实现这一点很简单，但我想挑战一下自己，只使用CSS，我觉得我做得有点短。
当前回答
我们可以使用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毫秒）恢复初始值（相当于显示：动画回调中无）。
注意，这种方法比使用可见性的方法要好。在这种情况下，元素仍然占据页面上的空间，并且并不总是合适的。
有关更多示例，请参阅本文。
其他回答
将溢出：隐藏更改为溢出：可见。它工作得更好。我这样使用：
#menu ul li ul {
background-color:#fe1c1c;
width:85px;
height:0px;
opacity:0;
box-shadow:1px 3px 10px #000000;
border-radius:3px;
z-index:1;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.6s ease;
}
#menu ul li:hover ul {
overflow:visible;
opacity:1;
height:140px;
}
可见更好，因为溢出：隐藏的行为与显示：无完全相同。
显示不是转换工作的财产之一。
有关可以应用转换的CSS财产的列表，请参阅动画CSS财产。请参阅CSS值和单位模块第4级，组合值：插值、相加和累加，了解如何插值。
9.1中列出了CSS 3。来自CSS的财产（只需关闭警告弹出窗口）
我也尝试过使用高度，但那只是失败得很惨。
上次我不得不这样做时，我使用了max height，这是一个可设置动画的属性（虽然它有点黑客，但确实有效），但要注意，对于复杂的页面或使用低端移动设备的用户来说，它可能非常刺耳。
我已经多次遇到这个问题，现在只是简单地说：
.block {
opacity: 1;
transition: opacity 250ms ease;
}
.block--invisible {
pointer-events: none;
opacity: 0;
}
通过添加类块（不可见），整个元素将不可单击，但它后面的所有元素都将是因为指针事件：所有主要浏览器都不支持（没有IE＜11）。
您可以连接两个或更多的转换，而可见性是这次方便的地方。
第二部分{边框：1px实心#eee；}div>ul{可见性：隐藏；不透明度：0；过渡：可见性0s，不透明度0.5s线性；}div：悬停>ul{可见性：可见；不透明度：1；}＜div＞＜ul＞<li>项目1</li><li>项目2</li><li>项目3</li></ul></div>
（不要忘记转换属性的供应商前缀。）
更多详情请参阅本文。
现在可以向块特性添加自定义动画。
@keyframes showNav {
from {opacity: 0;}
to {opacity: 1;}
}
.subnav-is-opened .main-nav__secondary-nav {
display: block;
animation: showNav 250ms ease-in-out both;
}
Demo
在这个演示中，子菜单从display:none变为display:block，并且仍然能够淡入淡出。
