CSS3 - css3 전환이 끝난 후 z- 인덱스 변경

Question

opacity translations이 완료되면 div3의 z-index을 변경하고 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; 
} 

참고 : 사업부 클래스 high-light-active가있는 경우, 내가 먼저 원하는 전환이 발생하고 z-index value의 변경 후

는 CSS3 코드를 따릅니다.

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- 인덱스를 적용합니다.

그것은 transition의 세번째 매개 변수 (지연 값)으로 수도

Answer 2

:

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>

대신`Z-index`의