CSS3 transition on floating elements

Question

I am trying to replicate apple's search page, in which when you click filters the results animate to their next position instead of just jumping to it. I want to do this to make it clearer where the results are moving to.

This is my attempt but i don't think this can be done purely in css? I have tried adding a transition to all events but it does not seem to work. I think Apple are using a transform to move the position but i cant see how. Any help would be much appreciated. Thanks

APPLES RESULTS PAGE

DEMO ON CODEPEN

<button>toggle filters</button>
<div class="resource">
  <div class="results">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="filter"></div>
</div>

.resource {
  width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.resource > * {
  transition: all 1s ease;
}
.results {
  width: 1000px;
  background: red;
  height: 500px;
}
.results div {
  background: green;
  float: left;
  height: 200px;
  width: 240px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.filter-active .results {
  width: 750px;
}
.filter {
  width: 250px;
  background: blue;
  height: 500px;
  position: absolute;
  top: 0;
  right: -250px;
}
.filter-active .filter {
  right: 0;
}

var filtertoggle = $(".resource");

$('button').click(function(){
 filtertoggle.toggleClass('filter-active');
});

Answer 1

Im not shire if I'm understanding you question, but if you asking about making room for the tool bar when you click the toggle buttons, something like this could work, not the perfect solution but it works.

animate width on the results and toggle on the filter like this:

$('button').click(function() {
   var toggleWidth = $(".results").width() == 300 ? "200px" : "300px";
   $('.filter').toggle('slow');
   $('.results').animate({width: toggleWidth});
});

http://jsfiddle.net/Twrst/