Slide up animation for text using CSS only-CodePudding

I'm trying to reproduce this specific text animation, shown here They're able to make it appear as if there is a mask or something and the sentences slide up from behind it.

I think this would be easier if it was a solid background color because I could put a pseudo class before it and create the mask using the same color as the background. However, the background will be a random image. so this won't work.

Here's what I have so far

.offset-header {
  font-family: Outfit;
  font-style: normal;
  font-weight: 400;
  font-size: 42px;
  line-height: 44px;
  letter-spacing: -0.02em;
  max-width: 500px;
  margin: 10px 0;
  }

  .offset-header-odd,
  .offset-header-even {
    display: block;
    animation-name: slideUp;
    animation-duration: 4s;
    animation-timing-function: ease-in;
  }
  .offset-header-odd {
    text-align: left;
    animation-delay: 0s;
    animation-fill-mode: forwards;
  }
  .offset-header-even {
    text-align: right;
    animation-delay: 150ms;
    animation-fill-mode: both;
  }

  @keyframes slideUp {
    0%,
    50% {
      transform: translateY(100%);
      opacity: 0;
    }
     
    60%,
    100% {
      transform: translateY(0);
      opacity: 1;
    
    }
  }

<div >
  <h1 >
    <span >Elevate your space </span>
    <span >with thoughtful design</span>
  </h1>
</div>

CodePudding user response：

Use a <span> in a <span>. The parent span should have overflow hidden and the child span should have the animation

.offset-header {
  font-family: Outfit;
  font-style: normal;
  font-weight: 400;
  font-size: 42px;
  line-height: 44px;
  letter-spacing: -0.02em;
  max-width: 500px;
  margin: 10px 0;
  }

  span.offset-header {
    display: block;
    overflow: hidden;
  }
  span.offset-header > span {
    animation-name: slideUp;
    animation-duration: 4s;
    animation-timing-function: ease-in;
    display: block;
  }
  .offset-header-odd > span {
    text-align: left;
    animation-delay: 0s;
    animation-fill-mode: forwards;
  }
  .offset-header-even > span {
    text-align: right;
    animation-delay: 150ms;
    animation-fill-mode: both;
  }

  @keyframes slideUp {
    0%,
    50% {
      transform: translateY(100%);
      opacity: 0;
    }
     
    60%,
    100% {
      transform: translateY(0);
      opacity: 1;
    
    }
  }

<div >
  <h1 >
    <span ><span>Elevate your space</span></span>
    <span ><span>with thoughtful design</span></span>
  </h1>
</div>