Css Transitions one after another
<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>