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

Question

当我按另一个div ，我想给一个div设置动画，但是我不知道如何操作。

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

这是一个小提琴http://jsfiddle.net/rb2azjtL/1/

在我的小提琴中，有一匹马的形象。 如何制作动画，以便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 。 检查这个提琴手 。