Is it possible to create a transition delay from one CSS attribute to another on the same element? For example, I want to transition the width of a div element first and then transition its height.
<div class="rect" id="box2"></div>
Here is the accompanying CSS:
.rect {
margin-top:50px;
width:10px;
height:80px;
background-color:black;
}
#box2 {
transition:all 1s ease-in-out ;
-webkit-transition:all 1s ease-in-out ;
-moz-transition:all 1s ease-in-out ;
}
#box2:hover {
width:300px;
height:200px;
}
This current code causes both the height and width transitions to occur simultaneously. Additionally, the transition delay in #box2 affects the entire transition. What steps can be taken to resolve this issue?
For reference, here is a sample http://jsfiddle.net/bBnQW/