Question

我有一个白色的空间，有一个灰色的＆＃34;标签＆＃34;挂在白色空间后面。我有动画从视图中提升整个事物。

出于某种原因，通过动画的持续时间（2s），＆＃34;标签＆＃34;显示在空白区域前面，直到关键帧过渡停止并且z-index适当地将标签放在空白区域后面。

我正在寻找一种在整个过渡期间显示白色空间后面的标签的方法（适当的z-index到动画）。

＆＃13;

.form{
  position: relative;
  top: 70px;
  width: 60%;
  height: 82%;
  padding: 10px 20px;
  background: #f4f7f8;
  margin: 10px auto;
  border-radius: 8px;
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
#form-Animation{
  animation: slide 2s 1;
}
@keyframes slide{
  0%{
    transform: translate3d(0px, 500%, 0px);
  }
  100%{
    transform: translate3d(0px, 0%, 0px);
  }
}
.formHat{
  height: 30px;
  position: absolute;
  top: -33px;
  left: 0px;
  color: white;
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  font-size: 110%;
  background-color: #8c8c8c;
  padding: 6px;
  border-radius: 8px 8px 0px 0px;
  z-index: -10;
  display: block;
}

＆＃13;

<div class="form" id="form-Animation">
  <div class="formHat" id="formHat">This is the tab!
  </div>
  </div>

＆＃13;

Answer 1

因为你的formHat在移动并为其提供背景的形式中采用z-index: -10，你必须在内部形式创建一个新的div

这是一个有效的例子测试它并告诉我

        .form{
          width: 60%;
          height: 82%;
          position: relative;
            margin-top: 40px;
        
        }
        .form_front{
          top: 70px;
          padding: 10px 20px;
          background: #f4f7f8;
          margin: 10px auto;
          border-radius: 8px;
          font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
        }
        #form-Animation{
          animation: slide 2s 1;
        }
        @keyframes slide{
          0%{
            transform: translate3d(0px, 500%, 0px);
          }
          100%{
            transform: translate3d(0px, 0%, 0px);
          }
        }
        .formHat{
          height: 30px;
          position: absolute;
          top: -33px;
          left: 0px;
          color: white;
          font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
          font-size: 110%;
          background-color: #8c8c8c;
          padding: 6px;
          border-radius: 8px 8px 0px 0px;
          z-index: -10;
          display: block;
        }

    <!DOCTYPE html>
    <html>
    <body>  
    <div class="form" id="form-Animation">
    <div class="form_front"></div>
      <div class="formHat" id="formHat">This is the tab!</div>
      </div>  
    </body>
    </html>

Z-Index无法通过动画/过渡正常工作？

1 个答案: