Question

CSS是否有可能为div的left属性设置动画，从而导致在其旁边浮动的div自动移动相同的增量？

我制作了一些jsfiddle代码，证明我的问题没有按照我希望的方式工作。点击红色方块看它的动画，虽然在蓝色方块的顶部。

我希望＃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。

通过动画div向左推动浮动div的动画

1 个答案: