CSS3, WebKit Transition Order? How to queue to the transitions?

Question

I have the following:

-webkit-transition-property: top, bottom, z-index;
-webkit-transition-duration: 0.5s;

Problem is I don't want the z-index to transition until after top & bottom are done.

Is there a way to tell Webkit transition to transition top/bottom and then when done, do z-index instantly or with the duration, either way?

Thanks

Answer 1

You have to specify a delay on the z-index transition:

-webkit-transition-property: top, bottom, z-index;
-webkit-transition-duration: 0.5s;
-webkit-transition-delay: 0s, 0s, .5s;

Answer 2

And for your info, in javascript, you can also listen on the webkitTransitionEnd event and modify the z-index when this event is fired.

This event have two useful properties :

• propertyName : the name of the property involved in the transistion
• elapsedTime : time elapsed during the transistion