javascript - 通过动画 div 向左推送动画 float 的 div

Question

是否可以对 div 的左侧属性设置 CSS 动画，从而使 float 在它旁边的 div 自动移动相同的增量？

我已经制作了一些 jsfiddle 代码来证明我的问题没有按照我希望的方式工作。单击红色方 block 以查看它的动画效果，尽管它位于蓝色方 block 的顶部。

我希望#block1 能够通过动画 block1 的 CSS 属性“left”来有效地插入#block2。

CSS:

* {
    margin:0;
    padding:0;
}
.red {
    float: left;
    position: relative;
    width:100px;
    height:100px;
    background-color: #F00;
}

.blue {
    float: left;
    width:100px;
    height:100px;
    background-color: #00F;
}

.animateMenu {
    -webkit-animation: myfirst 0.5s forwards;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    from {left: 0px;}
    to {left: 100px;}
}

HTML

<div id="block1" class="red"></div>
<div id="block2" class="blue"></div>

Javascript

$("#block1").on( { "mousedown" : onInteraction } );

function onInteraction(e) {
    $("#block1").removeClass("animateMenu").addClass("animateMenu");
}

http://jsfiddle.net/6edgsanb/

非常感谢您提前提供的帮助。

Answer 1

不是动画left，而是动画margin-left。这是修改后的 fiddle .