仅使用 CSS 的文本向上滑动动画

Question

我正在尝试重现这个特定的文本动画，shown here他们能够让它看起来好像有一个面具或其他东西，句子从它后面向上滑动。

我认为如果它是纯色背景颜色会更容易，因为我可以在它前面放一个伪 class 并使用与背景相同的颜色创建遮罩。但是，背景将是随机图像。所以这行不通。

这是我目前所拥有的

.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 class="offset-header">
  <h1 class="hero-header">
    <span class="offset-header offset-header-odd">Elevate your space </span>
    <span class="offset-header offset-header-even">with thoughtful design</span>
  </h1>
</div>

Answer 1

在<span>中使用<span>。父跨度应该隐藏溢出，子跨度应该有动画

.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 class="offset-header">
  <h1 class="hero-header">
    <span class="offset-header offset-header-odd"><span>Elevate your space</span></span>
    <span class="offset-header offset-header-even"><span>with thoughtful design</span></span>
  </h1>
</div>

仅使用 CSS 的文本向上滑动动画

Slide up animation for text using CSS only

css

animation

sass

css-animations