Html 如何在单击另一个div时设置该div的动画，以及如何使已设置动画的div移动其他元素

我想在按下另一个

div

时设置一个

div

的动画，但我不知道如何设置

我还希望动画div移动其他元素，而不仅仅是在它们上面设置动画。当我这样做时，

div

会在正下方图像的顶部设置动画。我希望它能推动他们。我如何做到这一点。这就是我目前所拥有的

这是一把小提琴

在我的小提琴里，有一个马的形象。如何使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转换就可以了

此外，div是重叠的，因为您显式地将其位置设置为

absolute

。检查

    .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;
    }