在纯 CSS 中从左到右显示文本的效果答案

【问题标题】：Effect to reveal the text from left to right in pure css在纯 CSS 中从左到右显示文本的效果
【发布时间】：2021-11-29 03:59:55
【问题描述】：

我想创建一个效果来显示文本，例如我的代码框。除了使用动画蒙版图像，我还有其他选择吗？

.animation-text-wipe {
  -webkit-mask-image: linear-gradient(
    to left,
    rgba(255, 255, 255, 0) 75%,
    #000 75%
  );
  -webkit-mask-size: 500%;
}

.animation-text-wipe.animate-in {
  animation-name: text-wipe;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 0.1s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

@keyframes text-wipe {
  0% {
    opacity: 1;
    -webkit-mask-position: 100%;
  }

  100% {
    opacity: 1;
    -webkit-mask-position: 0%;
  }
}
.text {
  width: 60%;
  color: #000;
  background-color: #ffff;
}

.app {
  background-color: red;
}

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<div class="App">
      <div class="text-animations">
        <div class="animate-in animation-text-wipe">
          <div class="text">
            <span> i am label </span>
            <input />
            <span> i am label </span>
            <input />
            <span> i am label </span>
            <input />
            <span> i am label </span>
            <input />
            <p>
              real-world studies published Wednesday confirm that the immune
              protection offered by two doses of Pfizer's Covid-19 vaccine drops
              off after two months or so, although protection against severe
              disease, hospitalization and death remains strong. The studies,
              from Israel and from Qatar and published in the New England
              Journal of Medicine, support arguments that even fully vaccinated
              people need to maintain precautions against infection. One study
              from Israel covered 4,800 health care workers and showed antibody
              levels wane rapidly after two doses of vaccine "especially among
              men, among persons 65 years of age or older, and among persons
              with immunosuppression." Vaccines may have prevented a
              quarter-million Covid-19 cases and 39,000 deaths among seniors
              Vaccines may have prevented a quarter-million Covid-19 cases and
              39,000 deaths among seniors "We conducted this prospective
              longitudinal cohort study involving health care workers at Sheba
              Medical Center, a large tertiary medical center in Israel,"
              Sheba's Dr. Gili Regev-Yochay and colleagues wrote. The
              researchers noted that levels of so-called neutralizing antibodies
              -- the immune system's first line of defense against infection --
              correlate with protection against infection, but for this study
              they studied only antibody levels.
            </p>
          </div>
        </div>
      </div>
    </div>

</body>
</html>

codesandbox

【问题讨论】：

你的目标是什么效果？你目前的方法有问题吗？
寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。
我寻找像我的代码框一样显示文本效果。但是想知道是否有更好的解决方案而不是使用面具
@Paulie_D 我在描述中包含了我的代码框
@Paulie_D 明白。更新问题

标签： javascript css animation css-animations

【解决方案1】：

给你...

body {
  margin: 0;
  padding: 0;
}

body:not(.App) {
  background-color: red;
}

.App {
  background-color: white;
}

.text::before {
  content: '';
  background: red;
  position: absolute;
  width: 60%;
  height: 100%;
  animation-name: reveal;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 0.1s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  right: 0;
}

@keyframes reveal {
  0% {
    width: 100%;
  }
  /* First second. */
  20% {
    width: 88%;
  }
  /* Second second. */
  40% {
    width: 76%;
  }
  /* Third second. */
  60% {
    width: 64%;
  }
  /* Fourth second. */
  80% {
    width: 52%;
  }
  /* Fifth second. */
  100% {
    width: 40%;
  }
}

.text {
  width: 60%;
}

<!DOCTYPE html>
<html lang='en'>

<head>

  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>

</head>

<body>

  <div class='App'>
    <div class='text-animations'>
      <div class='animate-in animation-text-wipe'>
        <div class='text'>
          <span> i am label </span>
          <input />
          <span> i am label </span>
          <input />
          <span> i am label </span>
          <input />
          <span> i am label </span>
          <input />
          <p>
            real-world studies published Wednesday confirm that the immune protection offered by two doses of Pfizer's Covid-19 vaccine drops off after two months or so, although protection against severe disease, hospitalization and death remains strong. The studies,
            from Israel and from Qatar and published in the New England Journal of Medicine, support arguments that even fully vaccinated people need to maintain precautions against infection. One study from Israel covered 4,800 health care workers and
            showed antibody levels wane rapidly after two doses of vaccine 'especially among men, among persons 65 years of age or older, and among persons with immunosuppression.' Vaccines may have prevented a quarter-million Covid-19 cases and 39,000
            deaths among seniors Vaccines may have prevented a quarter-million Covid-19 cases and 39,000 deaths among seniors 'We conducted this prospective longitudinal cohort study involving health care workers at Sheba Medical Center, a large tertiary
            medical center in Israel,' Sheba's Dr. Gili Regev-Yochay and colleagues wrote. The researchers noted that levels of so-called neutralizing antibodies -- the immune system's first line of defense against infection -- correlate with protection
            against infection, but for this study they studied only antibody levels.
          </p>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

【讨论】：

质疑为什么我们有规则.App { background-color: red; }。在动画下显示所有文本完成之前，如何使红色背景显示完成？
背景是否为红色？我不确定您的意思：如何在动画下显示所有文本完成之前使红色背景显示完整？
是的，我希望在文本显示之前显示背景红色
所以无论文本不显示背景红色应该显示
我更新了我的答案。现在还好吗？