CSS3 Transitions - How to delay reset of the z-index property?

Question

Basically, a "highlight" class is added to elements with class "edge" dynamically through javascript on mouseenter. The highlight class is removed on mouseleave. I want to transition the border-color of these elements. However, this "highlight" class also modifies the stack order. I want a z-index of 1 to be set on all highlighted edges before the transition begins (on mouseenter) and I want the z-index of 1 to be removed after the transition completes (on mouseleave). Currently the z-index property is reset immediately after the "highlight" class is removed.

Basic set up:

.edge {      border-color: hsl(0, 0%, 40%);     border-style: solid;     border-width: (set appropriately in another selector);      transition-duration: 1s;     -moz-transition-duration: 1s;     -o-transition-duration: 1s;     -webkit-transition-duration: 1s;      transition-property: border-color;     -moz-transition-property: border-color;     -o-transition-property: border-color;     -webkit-transition-property: border-color; }  .edge.highlight {     border-color: hsl(0, 0%, 85%);     z-index: 1; } 

First attempt (obviously the delay fixes the timing on one end and messes it up on the other):

.edge {     border-color: hsl(0, 0%, 40%);     border-style: solid;     border-width: (set appropriately in another selector);      transition-duration: 1s, 0;     -moz-transition-duration: 1s, 0;     -o-transition-duration: 1s, 0;     -webkit-transition-duration: 1s, 0;      transition-delay: 0, 1s;     -moz-transition-delay: 0, 1s;     -o-transition-delay: 0, 1s;     -webkit-transition-delay: 0, 1s;      transition-property: border-color, z-index;     -moz-transition-property: border-color, z-index;     -o-transition-property: border-color, z-index;     -webkit-transition-property: border-color, z-index; } 

Any and all help is very much appreciated. Thanks in advance.

edit: Please keep in mind that the user can mouseenter/mouseleave on several different edges before the transitions have a chance to complete. Thanks.

Answer 1

You can use a delay, as Jcubed suggested, or the timing functions step-end and step-start. The trick is to use two different timing functions: stepped for z-index, and linear for opacity and other continuous properties.

edge {     z-index: -1;     opacity: 0;     transition: z-index 0.5s step-end, opacity 0.5s linear; }  edge.highlight {     z-index: 1;     opacity: 1;     transition: z-index 0.5s step-start, opacity 0.5s linear; } 

Example: http://jsfiddle.net/cehHh/8/