CSS3 - 在css3转换结束后更改z-index

Question

我想在完成后更改z-indexdiv opacity translations,只有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

使用transition(延迟值)的第3个参数也是可能的:

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

是的，有点俗气，但是有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％的时间内对不透明度属性进行动画处理，然后将z-index应用于99％的时间。