Queue width and height transitions in css3

Question

I want to be able to queue CSS3 width and height transitions. When I click a div, its class is toggled by jquery to active , but I can't seem to get the width of the div to change first, and then the height.

 $(document).ready(function() { $("#resize").click(function() { $("#resize").toggleClass("active"); }); }); 

 #resize.active { width: 100%; height: 300px; -webkit-transition-property: height, width; -webkit-transition-duration: 0.5s, 0.5s; -webkit-transition-delay: 0.5s, 0.5s; transition-property: height, width; transition-duration: 0.5s, 0.5s; transition-delay: 0.5s, 0.5s; } #resize { background-color: blue; height: 45px; width: 100px; -webkit-transition-property: width, height; -webkit-transition-duration: 0.5s, 0.5s; -webkit-transition-delay: 0.5s, 0.5s; transition-property: width, height; transition-duration: 0.5s, 0.5s; transition-delay: 0, 0.5s; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="resize"> <h1> Stuff </h1> </div> 

jFiddle

The desired order:

1. Click
2. Width increases in 0.5 s
3. Simultaneously wait 0.5 s
4. Height increases in 0.5 s

Right now, it all happens at the same time in the jFiddle. On my local machine it ignores the height transition (it just shoots to 300px instead of easing, and then eases the width transition).

Any ideas?

Answer 1

If I understand you correctly,

The first duration value is affect on the first duration etc. So you need to change the transition-duration to 1s, 0.5s instead of 0.5s, 0.5s .

Like this:

 $(document).ready(function() { $("#resize").click(function() { $("#resize").toggleClass("active"); }); }); 

 #resize.active { width: 100%; height: 300px; -webkit-transition-property: height, width; -webkit-transition-duration: 1s, 0.5s; -webkit-transition-delay: 1s, 0.5s; transition-property: height, width; transition-duration: 1s, 0.5s; transition-delay: 1s, 0.5s; } #resize { background-color: blue; height: 45px; width: 100px; -webkit-transition-property: width, height; -webkit-transition-duration: 0.5s, 1s; -webkit-transition-delay: 0.5s, 1s; transition-property: width, height; transition-duration: 0.5s, 1s; transition-delay: 0, 1s; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="resize"> <h1> Stuff </h1> </div>