动画z-index

Question

我有此page，并想将其应用于它。

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

问题是页面上的各种其他元素具有不同的z-index，我想将其发送到某些元素的后面和其他元素的前面。我可以像以前那样为z-index设置动画吗？例如，将应用动画z索引1中的5s，应用z索引3中的10s。

Answer 1

是。完全按照您的预期完成。只需将z-index添加到动画关键帧中，如下所示：

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

Answer 2

尝试变换属性，也许比这里的z-index更好。

{
  transform: translateZ(10px)

}