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

这没有什么比这更复杂的了，这就是为什么不支持转换的浏览器仍然有效，只是没有动画。

CSS如何确定转换动画的方式？

1 个答案: