Question

How can I make transition delay from one css attribute to another on the same element , the example I want to make it to make transition for width first then for height of div element

<div  class="rect"id="box2"></div>​

and here’s the 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 code makes the height and width works together, and transition-delay in the #box2 makes delay for the whole transition! what should I do?

here’s the sample http://jsfiddle.net/bBnQW/

Answer 1

#box2{

             transition:width 1s ease-in-out, height 1s ease-in-out 1s ;
            -webkit-transition:width 1s ease-in-out, height 1s ease-in-out 1s ;
            -moz-transition:width 1s ease-in-out, height 1s ease-in-out 1s ;

        }

if this is what you want…