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/