title: Css Transitions one after another
body: <p>I tried to make the <code>CSS transitions</code> to play one after other ,means first it has to transform the width and later height.<br>
  I tried with couple of options but everything is in vain.I achieved this in the <code>javascript</code> But can some <code>CSS</code>professionals help to explore this and break it up.Thanks in advance.</p>
  
  <pre><code>&lt;style&gt; 
  div {
      width: 100px;
      height: 100px;
      background: red;
      -webkit-transition: width 2s;
      transition: all 2s;
  }
  
  div:hover {
      width: 300px;
      height:500px;
  }
  &lt;/style&gt;
  </code></pre>