CSS3 - 在CSS3过渡结束后更改z-index

Question

我希望通过CSS3属性来完成当透明度动画结束时，改变一个div的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;
}

注意：当 div 元素具有类名为high-light-active时，我希望首先进行过渡动画，然后再更改 z-index 值。

- Ricardo Rocha

---

你可以使用translateZ代替z-index。 - Roko C. Buljan

Answer 1

通过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>

- Ilya Streltsyn

---

惊人的解决方案，谢谢，6年后！ :) - Just Alex

Answer 2

是的，有点俗套，但通过动画是可以实现的：

.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%。

- roberrrt-s