Data-text attribute on an h1 element doesn't show up when adding an animation to the element

user_14450607 0
Viewed 80

I have an h1 element that I want to be invisible and then appear after a few seconds. The element has an ::after pseudo-element that displays a data-text attribute that shadows the h1 element. When I add the animation, I only see the h1 and not the pseudo-element as well. Here is my code

EDIT adding the animation to the pseudo-element makes it appear, but now the data-text appears over the h1 element when originally it is supposed to go behind it. Here are some pic of what is happening. The first is what it is doing and the second is what I want.

EDIT 2 The problem can be recreated by removing the z-index on the pseudo-element.

Wrong

Right

  <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;
  }
}
css-animations pseudo-element css html
1 Answers

You need to apply the animation to the pseudo-element as well.

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

Edit: Getting rid of the position: absolute on the h1 by wrapping it and giving it an display: inline solved the stacking order for me as well.

 <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;
      }
    }
  }
}
user_145451600
Related