我想在z-index完成后仅使用CSS3属性来更改div的opacity translations

有什么办法可以做到?

遵循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更改之后。

最佳答案

是的,有点俗气,但是使用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%的时间。

09-11 07:44
查看更多