Css Transitions one after another

Question

I tried to make the CSS transitions to play one after other ,means first it has to transform the width and later height.
I tried with couple of options but everything is in vain.I achieved this in the javascript But can some CSSprofessionals help to explore this and break it up.Thanks in advance.

<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s;
    transition: all 2s;
}

div:hover {
    width: 300px;
    height:500px;
}
</style>

Answer 1

Break up the individual transition properties into comma-separated values for ease of reference....then just use transition delay to sequence them.

div {
    width: 100px;
    height: 100px;
    background: red;
    transition-property: width, height;
    transition-duration:2s, 4s;
    transition-delay:0s, 2s;
    transition-timing-function:linear;
}

div:hover {
    width: 300px;
    height: 300px;
 }

<div></div>

Answer 2

Just use the transition-delay property in the transition shorthand to do multiple transitions in sequence in one CSS rule.

-webkit-transition: width 2s, height 2s ease 2s;
transition: width 2s, height 2s ease 2s;