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

【问题标题】：How to animate a div when another div is clicked and how to make the animated div move other elements单击另一个 div 时如何为 div 设置动画以及如何使动画 div 移动其他元素
【发布时间】：2014-10-10 11:32:33
【问题描述】：

当我按下另一个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;
    }

【问题讨论】：

标签： html css image animation

【解决方案1】：

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

此外，由于您将其位置显式设置为 absolute，因此 div 正在覆盖。检查this Fiddler。

【讨论】：