html - 仅使用 CSS 为移动以占据空白空间的元素设置动画

Question

http://jsfiddle.net/kscjq0y0/

我想在红色 div 消失时为黄色 div 的移动设置动画。

我知道这可以用 jQuery animate 来完成，但我想要一个 CSS3 解决方案(即使所有现代浏览器都不完全支持它)。

我试过 CSS transition 属性，但似乎对这种移动不起作用。

有没有办法做到这一点？

Answer 1

让它缩小

div {
    height: 100px;
    width: 300px;
    background-color: red;
    margin: 20px;
    padding: 10px;
    
}

#bottom {
    background-color: yellow !important;
    transition: all 0.5s ease;
}

#top {
    transition: all 2s;
}
body:hover #top {
    height: 0px;
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

<div id="top"></div>
<div id="bottom"></div>