我想在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%的时间。