CSS3 Animation Layout Changes for Floating Divs

Question

When the window is resized, the floating divs will be wrapped 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 for this that is independent of jQuery. I don't mind writing my own js if I need to. Ideally, I would like to implement this in the AngularJS directive as soon as I see that it works, therefore, therefore I do not want the jQuery dependency.

Here is a shortened version of my code: http://jsfiddle.net/cDS7Q/3/

HTML

<div id="content"> <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</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 similar to this site: http://saffron-consultants.com/journal/

Resize the window to see how the blocks enliven their new positions.

Answer 1

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

Answer 2

This is possible with css, but only if you change the settings with the media.

For instance:

If you change the element width or padding and margins using media queries, you get an animation. Also, if you position divs absolute or relative and change positions in media queries, then it works.

But not using simple float / wrap. You will need JavaScript / jQuery for this.

for example, add this to your script:

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