我怀疑任何刚开始CSS转换的人都会很快发现，如果你同时修改显示属性（block/none），它们就不起作用了。一个尚未提及的解决方法是，您可以继续使用display:block/none来隐藏/显示元素，但将其不透明度设置为0，这样即使在显示为display:block时，它仍然是不可见的。

然后添加另一个CSS类，例如“on”，将不透明度设置为1，并定义不透明度的转换。正如您可能想象的那样，您必须使用JavaScript将“on”类添加到元素中，但至少您仍在使用CSS进行实际转换。

P.S.如果您发现自己需要同时执行display:block和添加class“on”，请使用setTimeout延迟后者。否则，浏览器只会同时看到这两种情况，并禁用转换。

根据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=“”；};

请注意，如果您只是使链接透明，而不设置可见性：隐藏，那么它将保持可单击状态。

我终于为我找到了一个解决方案，将不透明度与绝对位置相结合（隐藏时不占用空间）。

.toggle {
  opacity: 0;
  position: absolute;
  transition: opacity 0.8s;
}

.parent:hover .toggle {
  opacity: 1;
  position: static;
}

编辑：在本示例中未应用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/

您可以简单地使用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;
}

总的来说，我发现最好的解决方案是：使用负上边距而不是显示：无。

对我来说效果很好的解决方案是使用一个负的上边距-边距对动画/转换有效-在转换转换后将菜单从页面顶部移开。对我来说，其中一个问题是，即使在使用可见性隐藏之后，它也会占用空间，下面的解决方案（结合绝对定位）解决了这个问题。这样做（并为语义目的将可见性设置为隐藏）几乎与显示：无一样好。但是，请注意，下面的可见性设置是可选的，实际工作是通过负边距完成的。

我喜欢这个解决方案，因为它避免了JavaScript——你可以看到我使用了一个输入元素（隐藏在汉堡图标下面）来隐藏/取消隐藏从屏幕左侧滑入的菜单。一个小小的烦恼是，必须使用“任意大的数字”作为负裕度，但它已经足够好了。IMHO唯一完全干净的解决方案是转换，以支持显示等功能，其中转换只是等待延迟，然后立即转换，但根据当前的CSS标准规范，这里是我的最佳解决方案：

CSS

#menu {
    /* Hide menu */
    position: absolute;
    overflow: hidden;

    margin: -99999px 0 0 -50px;
    padding: 0;
    visibility: hidden;
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);

    transition: margin 0s 0.5s, padding 0s 0.5s, visibility 0s 0.5s, transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}
#menuToggle input:checked~#menu {
    /* Display menu */
    overflow: unset;

    margin: -80px 0 0 -50px;
    padding: 125px 50px 25px 50px;
    visibility: unset;
    transform: none;

    transition: margin 0s 0s, padding 0s 0s, visibility 0s 0s, transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

HTML

<div id="menuToggle">
    <input type="checkbox" id="chkBurgerMenu" />
    <span></span><span></span><span></span>
    <ul class="navbar-nav">
        <li><a href="#" class="nav-link"">Home</a></li>
        <li><a href="#" class="nav-link"">Link1</a></li>
        <li><a href="#" class="nav-link"">Link2</a></li>
    </ul>
</div>