CSS3 - 在css3轉換結束後更改z-index

Question

我想在opacity translations完成時更改z-index的div，只能使用CSS3屬性。

有什麼辦法可以做到這一點？

沿用了CSS3代碼：

.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; 
} 

注：當div有類high-light-active，我想首先，過渡發生和z-index value變更後。

Answer 1

是的，有點俗氣，但animation這是可能的：

.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; 
    } 
} 

這基本上動畫中的99％的時間不透明度屬性，然後在99％應用的z-index。

Answer 2

也有可能與transition的第三個參數（延遲值）：

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>