CODEWITHSUNDEEP
htmlwebkitcss
AnApprentice
AnApprentice

Reputation: 111050

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

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

Upvotes: 12

Views: 11499

Answers (2)

jdramaix
jdramaix

Reputation: 1104

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

Upvotes: 6

DuMaurier
DuMaurier

Reputation: 1211

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;

Upvotes: 27

Related Questions