html - 向元素添加动画时，h1 元素上的数据文本属性不显示

Question

我有一个 h1 元素，我希望它不可见，然后在几秒钟后出现。该元素有一个::after 伪元素，它显示一个隐藏 h1 元素的数据文本属性。添加动画时，我只看到 h1 而看不到伪元素。这是我的代码

编辑将动画添加到伪元素使其出现，但现在数据文本出现在 h1 元素之上，而原本它应该在它后面。这是正在发生的事情的一些图片。第一个是它在做什么，第二个是我想要的。

编辑 2可以通过删除伪元素上的 z-index 来重现该问题。

  <section class="wrapper">
        <div class="content-wrapper">
            <img class="flipInY" src="./img/neon-blue - flip.png" alt="logo-triangle">
            <h1 class="name-ani" data-text="My Name">My Name</h1>
            <h2 data-text="web-dev">Web Developer</h2>
        </div>
    </section>



.wrapper {
  .content-wrapper {
    z-index: 0;
    position: relative;
    display: grid;
    justify-items: center;
    margin-top: 20vh;
    img {
      width: 350px;
      max-width: 100%;
      padding: 0 32px;
      // transform: rotate(180deg);
      filter: brightness(85%);
      position: relative;
    }
    h1 {
      background: linear-gradient(
        to bottom,
        #ebf1f6 0%,
        #abd3ee 50%,
        #859ee2 51%,
        #d5ebfb 100%
      );
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      font-family: kimberly;
      text-transform: uppercase;
      font-size: 2.25rem;
      transition: font-size 1s;
      position: absolute;
      top: 10%;
      opacity: 0;
      &::after {
        background: none;
        content: attr(data-text);
        left: 0;
        position: absolute;
        text-shadow: 1px -1px 0 rgba(255, 255, 255, 0.5),
          3px 1px 3px rgba(255, 0, 255, 0.85),
          -3px -2px 3px rgba(0, 0, 255, 0.85),
          1px -2px 0 rgba(255, 255, 255, 0.8);
        z-index: -10;
        opacity: 0;
      }
    }

.name-ani {
  animation-name: name-ani;
  animation-duration: 250ms;
  animation-delay: 4.5s;
  animation-fill-mode: forwards;
}

@keyframes name-ani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Answer 1

您还需要将动画应用于伪元素。

.name-ani,
.name-ani::after {
    animation-name: name-ani;
    animation-duration: 250ms;
    animation-delay: 4.5s;
    animation-fill-mode: forwards;
}

编辑:去掉 h1 上的 position: absolute，方法是包装它并给它一个 display: inline，这也为我解决了堆叠顺序。

 <section class="wrapper">
   <div class="content-wrapper">
     <img class="flipInY" src="./img/neon-blue - flip.png" alt="logo-triangle">
     <div class="h1-wrapper">
       <h1 class="name-ani" data-text="My Name">My Name</h1>
     </div>
     <h2 data-text="web-dev">Web Developer</h2>
   </div>
 </section>


.wrapper {
  .content-wrapper {
    z-index: 0;
    position: relative;
    display: grid;
    justify-items: center;
    margin-top: 20vh;

    img {
      width: 350px;
      max-width: 100%;
      padding: 0 32px;
      filter: brightness(85%);
      position: relative;
    }

    .h1-wrapper {
      position: absolute;
      top: 10%;
    }

    h1 {
      background: linear-gradient(to bottom,
          #ebf1f6 0%,
          #abd3ee 50%,
          #859ee2 51%,
          #d5ebfb 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      font-family: kimberly;
      text-transform: uppercase;
      font-size: 2.25rem;
      transition: font-size 1s;
      display: inline;
      opacity: 0;

      &::after {
        background: none;
        content: attr(data-text);
        left: 0;
        position: absolute;
        text-shadow: 1px -1px 0 rgba(255, 255, 255, 0.5),
          3px 1px 3px rgba(255, 0, 255, 0.85),
          -3px -2px 3px rgba(0, 0, 255, 0.85),
          1px -2px 0 rgba(255, 255, 255, 0.8);
        z-index: -10;
        opacity: 0;
      }
    }

    .name-ani,
    .name-ani::after {
      animation-name: name-ani;
      animation-duration: 250ms;
      animation-delay: 4.5s;
      animation-fill-mode: forwards;
    }

    @keyframes name-ani {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }
  }
}