根据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。

@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/

吉列尔莫的回答被接受后，CSS2012-04-03的转换规范改变了可见性转换的行为，现在可以在不使用转换延迟的情况下以更短的方式解决此问题：

.myclass > div {
                   transition:visibility 1s, opacity 1s;
                   visibility:hidden;  opacity:0
               }
.myclass:hover > div
               {   visibility:visible; opacity:1 }

为两个转换指定的运行时间通常应为相同的（尽管稍微长一点的可见性时间不是问题）。

有关运行版本，请参阅我的博客文章CSS Transition Visibility。

W.r.t.问题的标题“显示器上的转换：财产”，并回应Rui Marques和josh对公认答案的评论：

如果显示器或使用visibility属性（这可能是本问题中的情况）。

它不会完全删除显示的元素：无，只是使其不可见，但它仍保留在文档流中，并影响以下元素的位置。

完全删除与显示类似的元素的转换：不能使用高度（如其他答案和注释所示）、最大高度或边距顶部/底部进行转换，但也可以参见如何转换高度：0；至高度：自动；使用CSS？以及我的博客文章《显示器和高度财产上的CSS转换解决方案》。

针对GeorgeMillo的评论：需要财产和两个变换：不透明度属性用于创建淡入淡出动画和可见性属性，以避免元素仍在鼠标上反应事件。需要在不透明度上进行过渡以获得视觉效果可见性以延迟隐藏，直到淡出完成。

您也可以使用此选项：

.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;
}

在这种情况下不使用关键帧应用过渡的另一种方法是将元素的宽度设置为零，然后在悬停时取消设置

.className{
  visibility:hidden;
  opacity: 0;
  transition: .2s;
  width:0;
}

.className:hover{
  visibility:visible;
  margin-right: .5rem;
  opacity: 1;
  width:unset;
}

在本文发表时，如果您尝试更改显示属性，所有主要浏览器都会禁用CSS转换，但CSS动画仍然可以正常工作，因此我们可以使用它们作为解决方法。

示例代码（您可以相应地将其应用于菜单）演示：

将以下CSS添加到样式表中：

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

然后将fadeIn动画应用于父级悬停时的子级（当然还有设置显示：块）：

.parent:hover .child {
    display: block;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

更新2019-也支持淡出的方法：

（需要一些JavaScript代码）

//我们需要跟踪淡入元素，以便稍后在CSS中应用淡入document.addEventListener（“动画启动”，函数（e）{if（e.animationName==“淡入”）{e.target.classList.add（'did-fade-in'）；}});document.addEventListener（'animonend'，函数（e）{if（e.animationName===“淡出”）{e.target.classList.remove（'did-fade-in'）；}});第二部分{边框：5px实心；填充：10px；}div:悬停{边框颜色：红色；}.父项.子项{显示：无；}.parent:悬停.child{显示：块；动画：淡入1秒；}.parent:not（：hover）.child.id-fade-in{显示：块；动画：淡出1s；}@关键帧淡入{来自{不透明度：0；}至{不透明度：1；}}@关键帧淡出{来自{不透明度：1；}至{不透明度：0；}}<div class=“parent”>父母亲<div class=“child”>小孩</div></div>