title: after webkit transition "hide"(display:none) div
body: <p>I have something like this:</p>
  
  <pre><code> &lt;style&gt;
       #submenu {
        background-color: #eee;
        height:200px;
    width:400px;
    opacity: 1;
        -webkit-transition: all 1s ease-in-out;
       }
      .doSomething {
        background-color: #fc3;
    -webkit-transform: rotate(360deg);
    visibility:collapse;
       } 
    &lt;/style&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  
  &lt;body&gt;
     &lt;div id="submenu"&gt;`enter code here`
        &lt;div style="background-color:black;width:50;height:50"&gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;div style="background-color:yellow;height:250"&gt;&lt;/div&gt;
     &lt;script type="text/javascript"&gt;
      $(function(){
          $('#submenu').addClass('doSomething');
      });
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The problem is when first div finishes with animation I want to hide him and the div which is below(yellow one) to take his place. I tried to put property display:none but animation wont work.</p>
  
  <p>Any help is highly appreciate.</p>