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

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