Как правильно задать transition для z-index?

.card { 
  width: 200px; 
  height: 100px; 
  position: absolute; 
} 
.card.first { 
  top: 0; 
  left: 0; 
  z-index: 2; 
  background: green 
} 
.card.second { 
  top: 50px; 
  left: 100px; 
  z-index: 1; 
  background: blue 
} 
.card.second.shadow { 
  z-index: 3; 
  opacity: 1; 
  transition: .5s 
} 
.cards:hover .card.second.shadow { 
  opacity: 0 
 }

<div class="cards"> 
  <div class="card first"></div> 
  <div class="card second"></div> 
  <div class="card second shadow"></div> 
</div>