How do you delay a z-index transition?

Question

I have a div that transitions in and out by opacity, however the z-index on it hides the transition out. See the jfiddle for clarification.

http://jsfiddle.net/sprigmendle/16zfv3jx/2/

Whats the most simple way to put a timer, or transition on the z-index so it only happens after the fade out? A jfiddle of the solution would be appreciated. I also don't want to use Jquery if possible.

---

html

<a href="#pop">appear</a>
<div id="big"></div>

<div id="pop" id="pop_close">
    <a href="#pop_close">disappear</a>
</div>

---

css

#big {
    height: 10em;
    width: 10em;
    background: blue;
}

#pop{
    height: 10em;
    width: 10em;
    background: yellow;
    opacity:0;
    position: relative;
    left -7em;
    top: -5em;
    z-index: -1;
    transition: opacity 2s;
}

#pop:target {
    opacity: 1;
    z-index: 1;
}

#pop_close:target {
    opacity: 0;
    z-index: -1;
}

Answer 1

You can emulate a delay by adding z-index to your transition. Since there's no animation on z-index , it will take 2 seconds to see the effect.

#pop {
    transition: opacity 2s, z-index 2s cubic-bezier(0,1,1,0);
}

The cubic-bezier timing function will stop the jumping effect that sodawillow was speaking about.

fiddle

Answer 2

Make z-index transition with 2s delay to the transition and remove it when transitioning in.

In #pop

transition: opacity 2s, z-index 0s 2s;

In #pop:target

transition: opacity 2s, z-index 0s 0s;

JSFiddle