CSS3 Animate layout change for floating divs - css

Question

As you resize the window, the floating divs will wrap to the next line as expected. But I would really like this layout change to be animated.
EDIT: As an aside, it would be nice to find a solution to this that does not depend on JQuery. I don't mind writing my own js if I need to. Ideally I'd like to implement this into a AngularJS directive once I see it working, hence hence why I don't want the jQuery dependency.
Here is a shortened version of my code: http://jsfiddle.net/cDS7Q/3/
HTML
<div id="content">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
And here is my CSS
body {background-color: #333;}
#content div {
position: relative;
float: left;
background-color: #eee;
margin-left: 10px;
margin-bottom: 10px;
width: 100px;
height: 100px;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#content {
margin-top: 50px;
padding-top: $gutter;
padding-bottom: 50px;
overflow: hidden;
width: 100%;
}
The effect I'm trying to achieve is similair to this site: http://saffron-consultants.com/journal/
Resize the window to see the blocks animate into their new positions.

Answer 1

You could try quicksand for this.
http://razorjack.net/quicksand/

Answer 2

It is possible with css, but only if you change parameters with media queries.
For example:
If you change the width of an element, or the padding and margin with media queries, than you will get an animation.
Also, if you position divs absolute or relative and change the positions in the media queries then it work.
But not with simple floating / wrapping. For that you will need JavaScript / jQuery.
for example add this to your fiddle:
body {
background-color: #333;
}
#content div {
position: relative;
float: left;
background-color: #eee;
margin-left: 20px;
margin-bottom: 20px;
width: 200px;
height: 200px;
-webkit-transition: all .7s ease;
-moz-transition: all .2s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
#content {
margin-top: 50px;
padding-top: $gutter;
padding-bottom: 50px;
overflow: hidden;
width: 100%;
}
#media screen and (max-width: 480px) {
#content div {
margin-left: 10px;
margin-bottom: 10px;
width: 100%;
height: 100px;
}
}