我目前正在设计一个CSS“巨型下拉菜单”——基本上是一个常规的仅限CSS的下拉菜单，但包含不同类型的内容。
目前，CSS 3转换似乎不适用于“display”属性，也就是说，您不能进行从display：none到display：block（或任何组合）的任何转换。
当有人悬停在一个顶级菜单项上时，上面示例中的第二层菜单是否有办法“淡入”？
我知道你可以在visibility:属性上使用转换，但我想不出一种有效的方法。
我也尝试过使用高度，但那只是失败得很惨。
我也意识到，使用JavaScript实现这一点很简单，但我想挑战一下自己，只使用CSS，我觉得我做得有点短。
当前回答
现在可以向块特性添加自定义动画。
@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，并且仍然能够淡入淡出。
其他回答
您也可以使用此选项：
.dropdown {
height: 0px;
width: 0px;
opacity: .0;
color: white;
}
.dropdown:hover {
height: 20px;
width: 50px;
opacity: 1;
transition: opacity 200ms;
/* Safari */
-webkit-transition: opacity 200ms;
}
您可以简单地使用CSS可见性：hidden/visible而不是display:none/block
div {
visibility:hidden;
-webkit-transition: opacity 1s ease-out;
-moz-transition: opacity 1s ease-out;
-o-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
opacity: 0;
}
parent:hover > div {
opacity: 1;
visibility: visible;
}
将溢出：隐藏更改为溢出：可见。它工作得更好。我这样使用：
#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;
}
可见更好，因为溢出：隐藏的行为与显示：无完全相同。
我感谢所有的回答。以下是我用于类似目的的内容：过渡与动画。
例子：https://jsfiddle.net/grinevri/tcod87Le/22/
<div class="animation"></div>
<div class="transition"></div>
@keyframes animationTo {
0% { background-color: rgba(0, 0, 0, 0.1); }
100% { background-color: rgba(0, 0, 0, 0.5); }
}
@keyframes animationFrom {
0% { background-color: rgba(0, 0, 0, 0.5); }
100% { background-color: rgba(0, 0, 0, 0.1); }
}
.animation,
.transition{
margin: 5px;
height: 100px;
width: 100px;
background-color: rgba(0, 0, 0, 0.1);
}
.animation{
animation: animationFrom 250ms;
}
.animation:hover{
background-color: rgba(0, 0, 0, 0.5);
animation: animationTo 250ms;
}
.transition{
transition: background-color 250ms;
}
.transition:hover{
background-color: rgba(0, 0, 0, 0.5);
}
简单如下：）
@keyframes fadeout {
0% { opacity: 1; height: auto; }
90% { opacity: 0; height: auto; }
100% { opacity: 0; height: 0;
}
animation: fadeout linear 0.5s 1 normal forwards !important;
使其褪色，然后使其高度为0；。还要确保使用forward，使其保持在最终状态。
