CSS3 - Change z-index after css3 transition ends

Question

I want to change z-index of a div when the opacity translations has finished, only with CSS3 properties.

There is any way that I can do that?

Follows the CSS3 code:

.high-light{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: black;
    background-color: rgba(0, 0, 0, 0.61);
    opacity:0;
    left: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    transition: opacity 0.3s linear;
    z-index: 1;
}


.high-light.high-light-active  { 
    opacity:1;
    z-index: 1;
}

Note: When the div has the class high-light-active, I want first, the transition happens and after the change of z-index value.

Answer 1

It's also possible with the 3rd parameter of transition (the delay value):

h2 {
  background: rgba(255,192,192,.7);
  padding: 1em;
  margin: 0;
}
div {
  position: fixed;
  padding: 20px;
  background: #888;
  color: #fff;
  z-index: -1;
  opacity: 0;
  transition: opacity 1s, z-index .2s 1s;
  margin-top: -10px;
}

h2:hover + div {
  z-index: 1;
  opacity: 1;
}

<h2>Hover to see the transition</h2>
<div>Changing</div>

Answer 2

Yes, a bit cheesy, but with animation it's possible:

.high-light-active {
    animation: animate 5s forwards;
}

@keyframes animate {
  0% {
    opacity: 0;
    z-index: 0;
  }
  99% {
    opacity: 1;
    z-index: 0;
  }
  100% {
    z-index: 1;
  }
}

This basically animates the opacity property in 99% of the time, and then applies the z-index at 99%.