How to animate elements move with css3 transitions after hiding some element

How to animate elements move with css3 transitions after hiding some element

Is it possible to animate elements move with css3 transitions after hiding
some element?
I found some kind of solution here (see "It works for grids, too"
section):
http://blog.stevensanderson.com/2013/03/15/animating-lists-with-css-3-transitions/
However my case is more like this: http://jsfiddle.net/CUzNx/5/
<div class="container">
<div id="item1" class="item">Test1</div>
<div id="item2" class="item">Test2</div>
<div id="item3" class="item">Test3</div>
<div id="item4" class="item">Test4</div>
<div id="item5" class="item">Test5</div>
<div id="item6" class="item">Test6</div>
<div id="item7" class="item">Test7</div>
</div>
<div style="clear:both">
<button onclick="$('#item1').fadeOut();">
Hide first
</button>
<button onclick="$('#item1').fadeIn();">
Show first
</button>
</div>
I have floating div elements and after some element is hidden, it would be
nice if other elements were animated. Is it possible?