Push-анимировать плавающий div с помощью анимированного div налево

Question

Возможно ли, чтобы CSS анимировал свойство div div, в результате чего рядом с ним размещался div, который перемещался с той же инкрементной суммой автоматически?

Я подготовил код jsfiddle, который демонстрирует, что мой вопрос не работает так, как мне бы хотелось. Нажмите на красный квадрат, чтобы увидеть его оживленным, хотя и над вершиной синего квадрата.

Я бы хотел, чтобы # block1 был в состоянии в действительности нажать # block2, анимируя свойство CSS «left» блока1.

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.