Ricardo Rocha Ricardo Rocha - 2 months ago 44
CSS Question

CSS3 - Change z-index after css3 transition ends

I want to change

z-index
of a div when the
opacity translations
has finished, only with CSS3 properties.

There is any way that I can do that?

Follows the CSS3 code:

.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;
}


Note: When the div has the class
high-light-active
, I want first, the transition happens and after the change of
z-index value
.

Answer

Yes, a bit cheesy, but with animation it's possible:

.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;
  }
}

This basically animates the opacity property in 99% of the time, and then applies the z-index at 99%.

Comments