css - CSS如何确定动画过渡的方式？

Question

我有一个横幅代码，当悬停在上面时会显示一个下拉部分：

下面的 HTML 代码：

<div id="top_wrapper" class="hori_wrapper wrapper">
    <div id="top" class="hori_banner banner"></div>
    <div id="top_reveal" class="hori_reveal reveal"></div>
</div>

和CSS：

.wrapper {
border: dashed;
position: relative;
}

.banner {
background: blue;
position: relative;
}

.reveal {
background: red;
position: absolute;
z-index: 1;
}

.hori_wrapper {
width: 300px;
height: 50px;
clear: both;
}

.hori_banner {
width: 300px;
height: 50px;
}

.hori_reveal {
width: 300px;
height: 0px;
}

#top:hover + #top_reveal, #top_reveal:hover {
-webkit-transition: height 1s ease-in .5s;
-o-transition: height 1s ease-in .5s;
-moz-transition: height 1s ease-in .5s;
-transition: height 1s ease-in .5s;
height: 300px;
top: 50px;
}

基本上，我想知道的是：CSS如何确定它应该向下动画而不是其他方向？

谢谢！

Answer 1

所发生的只是它转换到如果属性被正常设置会发生的情况。

换句话说，如果高度是 300px，顶部是 50px，它会是什么样子？

没有什么比这更复杂的了，这就是为什么对于不支持过渡的浏览器来说仍然可以工作，只是没有动画。