title: Use css transition on multiple elements at the same time
body: <p>For some reason, when trying to animate two elements at the same time(based on max-height) the transition always happens one at a time, first one element and when it finishes it's transition the other element starts it's transition.
  Please see this example i have build on js bin to see the phenomenon.</p>
  
  <pre><code>setTimeout(function () {
      $(".b").css("max-height", "500px");
  }, 500);
  
  setTimeout(function () {
      $(".b").css("max-height", "0");
      $(".c").css("max-height", "500px");
  }, 2000);
  </code></pre>
  
  <p><a href="http://jsbin.com/riperifoku/edit?html,js,output" rel="nofollow">http://jsbin.com/riperifoku/edit?html,js,output</a></p>
  
  <p>I would appreciate any help in mitigating this mystery </p>