仅使用 CSS 为移动以占据空 space 的元素设置动画

Question

我想在红色消失时制作黄色 div 的动画。

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

我试过 CSS transition 属性但似乎不适合这种运动。

有办法吗？

Answer 1

您可以通过修改要设置动画的 CSS 属性来做到这一点。目前定位是基于块布局与另一个 div，这不是动画。但是，如果您自己更新 CSS 位置，那么该过渡将具有动画效果。请参阅以下示例。

window.setTimeout(function () {
    $("#top").fadeOut("slow");
    $("#bottom").css({ top: '0px' });
}, 1000);

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

#bottom {
    position: absolute;
    top: 140px;
    background-color: yellow !important;
    transition: all 0.5s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top"></div>
<div id="bottom"></div>

Answer 2

缩小

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>

仅使用 CSS 为移动以占据空 space 的元素设置动画

Animate an element that moves to occupy empty space with CSS only

html

css

css-transitions