它可以通过使用过渡计时函数step-end和step-start来处理

例如：https://jsfiddle.net/y72h8Lky/

$（“.run”）.on（“click”，函数（）{$（“.popup”）.addClass（“show”）；});$（“.popup”）.on（“单击”，函数（）{$（“.popup”）.removeClass（“show”）；}).popup{不透明度：0；显示：块；位置：绝对；顶部：100%；底部：0；左：0；右：0；z指数：1450；背景色：rgba（0，175，236，0.6）；过渡：不透明度0.3s缓和，顶部0.3s台阶结束；}.popup.show{过渡：不透明度0.3s缓和，顶部0.3s步进开始；不透明度：1；顶部：0；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><div class=“popup”></div><button class=“run”style=“font-size:24px；”>单击我</button>

我启动了一个名为[Tggle Display Animate][1]的开源骨架项目。

这个骨架助手将允许您轻松模拟jQuery显示/隐藏，但使用输入/输出CSS3转换动画。

它使用类切换，因此您可以在元素上使用除display之外的任何CSS方法：none|block|table|inline等，以及可以想到的其他替代用法。

它的主要设计目的是用于元素切换状态，并且它支持还原状态，其中隐藏对象允许您反向运行关键帧或播放隐藏元素的替代动画。

我正在研究的概念的大部分标记都是CSS，实际使用的JavaScript很少。

在本文发表时，如果您尝试更改显示属性，所有主要浏览器都会禁用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>

您也可以使用此选项：

.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中随意指定display:none，但是您必须使用JavaScript将其更改为block（或其他任何内容），然后您还必须向有问题的元素添加一个类，该类实际上使用setTimeout（）进行转换。这就是全部。

即。：

<style>
    #el {
        display: none;
        opacity: 0;
    }
    #el.auto-fade-in {
        opacity: 1;
        transition: all 1s ease-out; /* Future, future, please come sooner! */
        -webkit-transition: all 1s ease-out;
        -moz-transition: all 1s ease-out;
        -o-transition: all 1s ease-out;
    }
</style>

<div id=el>Well, well, well</div>

<script>
    var el = document.getElementById('el');
    el.style.display = 'block';
    setTimeout(function () { el.className = 'auto-fade-in' }, 0);
</script>

这在最新的sane浏览器中进行了测试。显然，它不应该在Internet Explorer 9或更早版本中工作。

我认为萨尔曼PK有最接近的答案。它可以通过以下CSS动画淡入或淡出项目。但是，显示属性不会平滑地设置动画，只有不透明度。

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

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

如果你想让元素从显示块移动到不显示块，我看不出目前只使用CSS是可能的。您必须获得高度并使用CSS动画来降低高度。这在CSS中是可能的，如下面的示例所示，但要知道为元素设置动画所需的确切高度值是很困难的。

jsFiddle示例

CSS

@-webkit-keyframes pushDown {
  0% {
    height: 10em;
  }
  25% {
    height: 7.5em;
  }
  50% {
    height: 5em;
  }
  75% {
    height: 2.5em;
  }
  100% {
    height: 0em;
  }
}

.push-down {
    -webkit-animation: pushDown 2s forwards linear;
}

JavaScript

var element = document.getElementById("element");

// Push item down
element.className = element.className + " push-down";