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，它会是什么样子？

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