Question

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

    .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。

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

1 个答案: