Javascript 向左按动画div设置浮动div的动画

CSS是否可以对div的left属性设置动画，从而使其旁边浮动的div自动移动相同的增量

我已经生成了一些JSFIDLE代码来演示我的问题没有按照我希望的方式工作。单击红方块以查看它的动画效果，尽管它位于蓝色方块的顶部

我希望#block1能够通过设置block1的CSS属性“left”的动画来实际推送#block2

CSS:

HTML

---

非常感谢您事先提供的帮助。

不要设置

左侧

的动画，而是设置

左侧边距

的动画。这是一个修改过的

* {
    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;}
}

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

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

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