CSS Transition and Z-Index

How to transition z-index?

Although theoretically you can transition z-index, it wouldn't make much sense, i.e. would not result in the crossfade effect which you obviously are looking for: z-index values are integers, which - when you change them in the smallest possible steps (integers, no commas) - results in states either before the other one OR behind the other one - no transitional "half states" in between. If you want to do a kind of continuous crossfade between two elements, you should use a transition on opacity.

In your particular case, since your DIVs are not directly above each other, but only overlap each other, you can solve that by having a second DIV identical to img2 (I called its class .img3), but with z-index: 0 and this CSS rule:

.img1:hover + .img2 {
  opacity: 0;
}

This will fade out img2, but still show img3, which however is behind img1, creating the impression of a transition between img1 and img2.

https://jsfiddle.net/2a2epLfv/1/

.img1,.img2,.img3 {  border: 1px solid black;  transition: 1s;  position: absolute;}
.img1 {  left: 20%;  height: 300px;  width: 300px;  z-index: 1;  background-image: url(http://cdn.pcwallart.com/images/balloons-photography-vintage-wallpaper-1.jpg);}
.img2,.img3 {  right: 20%;  width: 300px;  height: 300px;  top: 100px;  background-image: url(https://i.pinimg.com/736x/c1/7b/15/c17b150e93c4e9c50d963b076484bee7--apple-wallpaper-iphone-wallpaper.jpg);}
.img2 {  z-index: 2;}
.img3 {  z-index: 0;}
.img1:hover+.img2 {  opacity: 0;}

<div class="img1"></div><div class="img2"></div><div class="img3"></div>

CSS3 - Change z-index after css3 transition ends

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

CSS transition and z-index conflict

Looks Like the problem was only in Chrome but not in FF. What you need to do is set a smaller z-index on the wrapper container like this

.wrap {
  z-index:1;
}

That should fix it and here is the updated JSFIDDLE

Animating z-index

Yes. It's done exactly as you'd expect. Just add z-index into your animation keyframes like so:

.contact {  width: 0;  height: 0;  border: 50px solid transparent;  border-bottom: 70px solid red;  position: relative;  top: 0;  margin-left: 0;  transform: rotate(90deg);  float: right;}
.contact:after {  content: '';  position: absolute;  left: -50px;  top: 70px;  width: 0;  height: 0;  border: 50px solid transparent;  border-top: 70px solid red;}
.contact {  animation: fish 4s linear infinite;}
@keyframes fish {  0% {    right: 0px;    top: 0px;  }  25% {    right: 200px;    top: 0px;  }  50% {    right: 200px;    top: 200px;    z-index:100;  }  75% {    right: 0px;    top: 200px;  }  100% {    right: 0px;    top: 0px;  }}
.box {height: 50px; width 100px; background-color: black; margin: auto; transform: rotate(90deg);}

<div class="contact"></div><div class="box"></div>

How come css animations change z-index?

Elements in HTML are positioned on the z-axis according to their stacking context.

By default a page has 1 stacking context – the HTML element – and all children of a stacking context are positioned according to their DOM order.

However, a new stacking context can be created on an element when certain CSS properties are applied. Properties such as position: absolute or position: relative are commonly used to create new stacking contexts, which is why you are able to position them on the z-axis with z-index. When a new stacking context is created, it is positioned above the parent stacking context by default.

transform is another CSS property that will create a new stacking context (since you can transform an element on the z-axis). Since the .blue element has a transform but the .red element doesn't when you comment out the animation, it gets a new stacking context which defaults to above the parent stacking context (which includes the .red element).

So to get the .blue box to always stay on top, you'll need to add position: relative and z-index: 1 to it.

.blue {
  position: relative;
  z-index: 1;
  transform: translate(30%);
}

Css z-index and transform weird flash

The fix is actually simple - just add transition-property: transform because that is what you want to transform (transition-property: all is the default and z-index is also transitioned).

See demo below:

$('body').on('click', function() {  var box = $('#a2')  box.one("transitionend", function() {    box.css("zIndex", -1).removeClass('t').addClass('t2')  }).addClass('t')});

.box {  position: absolute;  width: 250px;  padding: 10px;  background: #fff;  box-shadow: 1px 1px 5px #484848;  left: 0;  top: 0;  height: 370px;  box-sizing: content-box;  transition-duration: 0.5s;  transition-timing-function: ease;  backface-visibility: hidden;  transition-property: transform; /* added */}
.box img {  display: block;  position: relative;  backface-visibility: hidden;  user-select: none;}
#a1 {  z-index: 0;  transform: rotate(-4.5884deg);}
#a2 {  z-index: 1;  transform: rotate(7deg);}
.t {  transform: translateX(370px) rotate(23deg) !important;}
.t2 {  transform: translateX(0) rotate(-7deg) !important;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><div class="box" id="a1">  <img src="http://interactivepixel.net/tst/01.jpg" alt="Sample Image" /></div>
<div class="box" id="a2">  <img src="http://interactivepixel.net/tst/02.jpg" alt="Sample Image" /></div>

---

Related Topics