How to transition z-index?

Question

https://jsfiddle.net/vaf6nv36/1/

Can the balloons image slowly transition over the apple image?

I think that I need more transition parameters, or I should use

Answer 1

This is the trick I used.

.minus{animation:move 2s;animation-fill-mode:forwards;animation-delay:2s;}

@-webkit-keyframes move {
  0 {z-index:1;opacity:1}
  50% {opacity:0}
  100% { z-index:-1;opacity:1}
}
@keyframes move {
  0 {z-index:1;opacity:1}
  50% {opacity:0}
  100% {z-index:-1;opacity:1}
}

#main{background:red;width:100vw;height:100vh;position:fixed;top:0;left:0;opacity:.9}
.minus{position:fixed;top:10px;left:10px;z-index:1;color:#000}

FADE