javascript - Use css transition on multiple elements at the same time -

for reason, when trying animate 2 elements @ same time(based on max-height) transition happens 1 @ time, first 1 element , when finishes it's transition other element starts it's transition. please see example have build on js bin see phenomenon.

settimeout(function () {     $(".b").css("max-height", "500px"); }, 500);  settimeout(function () {     $(".b").css("max-height", "0");     $(".c").css("max-height", "500px"); }, 2000); 

http://jsbin.com/riperifoku/edit?html,js,output

i appreciate in mitigating mystery

hi looking this..?? understand think want

settimeout(function () {    $(".b").css("max-height", "500px");    $(".c").css("max-height", "500px");  }, 500);      settimeout(function () {    $(".b").css("max-height", "0");    }, 2000);

    .box { background: red; height: 200px; width: 200px; margin: 15px; }      .a { height: 500px; width: 500px; background: blue; }            .b, .c { max-height: 0; overflow: hidden; transition: max-height 1s; transition-delay: 0; }

  <div class="a">            <div class="b">        <div class="box"></div>      </div>      <div class="c">        <div class="box"></div>      </div>          </div>

and here working demo of code

demo