How to transition a div between two parents?

Question

I have two containers:

<div class="left">
    <div id="myDiv">A Div</div>
    <div id="myDiv2">A Div</div>
</div>
<div class="right">
    <div id="myDiv3">A Div</div>
</div>

The first contains div elements, which are moved with the following jQuery:

$(".left > div").click(function(){
    $(this).appendTo('.right');
});

The above, however, provides no animation. I would like to use a CSS transition to animate each div between the two parent elements (From .left to .right).

By the way, this is my CSS:

.left, .right{
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 50%;
    height: 100%;
}
.left{background:red;}
.right{background:green; left: 50%;}
.left > div, .right > div{
    display: block;
    height: 100px;
    width: 100px;
    margin: 10px;
    float: left;
    background: #fff;
    color: #000;
}

And a Fiddle: http://jsfiddle.net/x270Lndz/

---

I figure I need to get coordinates and transition between them, outside both .left and .right.

Answer 1

This has already been answered: https://stackoverflow.com/a/974765/2725684

The problem is 2 parts, moving elements in the DOM, and animating that movement, but the suggested is:

1. Store the position of the div, in its resting state, in the first column.
2. Append the div to the second column, store that position.
3. Turn off the visibility of the div.
4. Create a clone of the div, positioned where the resting state one was at.
5. Animate this clone across to the position of the appended div.
6. Turn off the visibility of this clone.
7. Turn back on the original div that was appended.

The javascript/jquery will execute this so fast you won't see the turning off/on of the divs and it will just appear as if the div they are seeing is the only one that ever existed.