html - 单击另一个 div 时如何为 div 设置动画以及如何使动画 div 移动其他元素

Question

我想在按下另一个 div 时为一个 div 设置动画，但我不知道如何操作。

我还希望动画 div 移动其他元素，而不是仅仅在它们上面设置动画。当我这样做时，div 在正下方的图像之上进行动画处理。我希望它能插入他们。我如何实现这一点。这是我到目前为止所拥有的。

这是一个 fiddle http://jsfiddle.net/rb2azjtL/1/

在我的 fiddle 里，有一匹马的形象。如何使 div 在动画时将图像向下推。

我面临的另一个问题是当我单击另一个 div 时如何为 div 设置动画。我想单击下面的蓝色 div 来为绿色 div 设置动画。我尝试了很多方法，但都没有成功
感谢您的帮助。

HTML

<div class="Invisible"> </div>
<img src="http://lorempixel.com/output/animals-q-c-1244-480-10.jpg" class="this"/>
<div class="thing"></div>
CSS

CSS

    .Invisible {
    z-index:2;
    position:absolute;
    top:0;
    left:0%;
    background-color:green;
    height:20%;
    width:100%;
}

    .Invisible:hover {
            z-index:2;
            position:absolute;
            top:0;
            left:0;
            background-color:green;
            height:20%;
            width:100%;
            -webkit-animation: Rooms 1s; /* Chrome, Safari, Opera */ 
            animation: Rooms 1s;
        }
        @-webkit-keyframes Rooms {
            from {height:20%; }
            to {height:60%; }
        }

        /* Standard syntax */
        @keyframes Rooms {
            from {height:20%; }
            to {height:60%;}
        }

    .this {
        position:absolute;
        top:20%;
        left:0;
        width:100%;
        height:50%;
    }
    .thing {
    background-color:blue;
        position:absolute;
        top:80%;
        left:20px;
        height:20px;
        width:20px;
    }

Answer 1

在这个例子中你真的不需要@keyframes。一个简单的 CSS 转换就可以了。

此外，div 会叠加，因为您明确将其位置设置为 absolute。检查this Fiddler .