css - Is it possible to apply css3 transition to floated elements? -

i have grid of left floated (float:left) images , user can drag image , drop in 'droppable', images after dragged image fills vacated space, it's abrupt, ease movement of images bit.

is possible css transition ?

html

<section id="basket">      <!--a sortable widget -jquery.ui-->     <ul id="sortable">      </ul>  </section>   <!--main content - image grid--> <section class="col s12">     <figure class="left  draggable"> <img src="imges/1.jpg' ?>"> </figure>     <figure class="left  draggable"> <img src="imges/1.jpg' ?>"> </figure>     <figure class="left  draggable"> <img src="imges/1.jpg' ?>"> </figure>     <figure class="left  draggable"> <img src="imges/1.jpg' ?>"> </figure>     <figure class="left  draggable"> <img src="imges/1.jpg' ?>"> </figure>     <figure class="left  draggable"> <img src="imges/1.jpg' ?>"> </figure> </section> <!--main content - image grid end--> 

css

.left {     float: left !important; }  #basket {     position: fixed;     left: 20px;     top: 10%;      width: 200px;     height: 200px;     border: 1px solid #b0b5bf;     background-color: #fff;  } 

javascript

$( document ).ready ( function (  ) {      $ ( "#sortable" ).sortable (  );      $ ( ".draggable" ).draggable ( {          revert : "invalid", cursor: "grabbing"       } );      $ (  "#basket" ).droppable ( {          drop: function ( event, ui ) {              var $sortable = $ ( ).children (  )[0];             ui.draggable.detach (  ).appendto (  $( '<li></li>' ).appendto( $sortable )  );          },         activeclass: "z-depth-1"      } );  } ); 

so, example if remove <figure class="left draggable"> <img src="imges/1.jpg' ?>"> </figure> draggin #basket , jquery.detach() remaining <figure> should ease in respective new positions. since <figure> floated elements, think simple transition isn't working.