我目前正在设计一个CSS“巨型下拉菜单”——基本上是一个常规的仅限CSS的下拉菜单，但包含不同类型的内容。
目前，CSS 3转换似乎不适用于“display”属性，也就是说，您不能进行从display：none到display：block（或任何组合）的任何转换。
当有人悬停在一个顶级菜单项上时，上面示例中的第二层菜单是否有办法“淡入”？
我知道你可以在visibility:属性上使用转换，但我想不出一种有效的方法。
我也尝试过使用高度，但那只是失败得很惨。
我也意识到，使用JavaScript实现这一点很简单，但我想挑战一下自己，只使用CSS，我觉得我做得有点短。
当前回答
简单如下：）
@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，使其保持在最终状态。
其他回答
我终于为我找到了一个解决方案，将不透明度与绝对位置相结合（隐藏时不占用空间）。
.toggle {
opacity: 0;
position: absolute;
transition: opacity 0.8s;
}
.parent:hover .toggle {
opacity: 1;
position: static;
}
根据W3C工作草案2013年11月19日，显示器不是可设置动画的属性。幸运的是，可见性是可设置动画的。您可以用不透明度的过渡（JSFiddle）链接其过渡：
HTML格式：<a href=“http://example.com“id=”foo“>foo”</a><button id=“hide button”>隐藏</button><button id=“show button”>显示</button>CSS：#食品{过渡特性：可见性，不透明度；转换持续时间：0s，1s；}#foo.hidden餐厅{不透明度：0；可见性：隐藏；过渡特性：不透明度，可见性；转换持续时间：1s，0s；转换延迟：0s，1s；}用于测试的JavaScript：var foo=文档.getElementById（'fo'）；document.getElementById（'hide-button'）.onclick=函数（）{foo.className=“隐藏”；};document.getElementById（'show-button'）.onclick=函数（）{foo.className=“”；};
请注意，如果您只是使链接透明，而不设置可见性：隐藏，那么它将保持可单击状态。
我怀疑，如果显示发生变化，转换被禁用的原因是因为显示实际的功能。它不会改变任何可以想象的流畅动画。
显示：无；可见性：隐藏；是两件完全不同的事情。两者都具有使元素不可见的效果，但具有可见性：隐藏；它仍然呈现在布局中，但只是不明显。隐藏元素仍然占用空间，并且仍然以内联或块、块内联或表的形式呈现，或者以显示元素告诉的方式呈现，并相应地占用空间。其他元素不会自动移动以占用该空间。隐藏元素只是不将其实际像素渲染到输出。
display：另一方面，没有一个实际上阻止元素完全渲染。它不占用任何布局空间。其他原本占据该元素占用的部分或全部空间的元素现在调整为占据该空间，就好像该元素根本不存在一样。
显示不仅仅是另一种视觉属性。它建立了元素的整个呈现模式，例如它是块、内联、内联块、表、表行、表单元格、列表项还是其他任何元素！每一个都有非常不同的布局影响，并且没有合理的方法来动画化或平滑地转换它们（例如，尝试想象从块到内联的平滑转换，反之亦然！）。
这就是为什么如果显示更改（即使更改为none或从none更改为none-none不仅仅是不可见的，它本身的元素渲染模式意味着根本没有渲染！），则会禁用转换。
编辑：在本示例中未应用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/
在我的例子中，我使用Jquery切换函数来管理元素的可见性，因此我没有使用css来处理转换，而是使用slideToggle来管理可见性并处理转换部分。
<!doctype html><html lang=“en”><head><meta charset=“utf-8”><title>幻灯片切换演示</title><style>p型{宽度：400px；}</style><script src=“https://code.jquery.com/jquery-3.5.0.js“></script></head><body><button id=“toggle button”>切换</button><button id=“slide toggle button”>滑动切换</button><p>这是结束所有段落的段落。你应该感到幸运</em>在你的生活。祝贺</p><脚本>$（“#切换按钮”）.click（function（）{$（“p”）.tggle（）；});$（“#滑动切换按钮”）.click（function（）{$（“p”）.slideToggle（“慢”）；});</script></body></html>
