使用 CSS 动画和背景颜色显示文本

Question

我试图做一个文本显示CSS动画像这一个。使用::before和::after似乎是一种过于复杂的方法，因此我尝试使用线性渐变背景颜色、背景位置或其他可能更简单的方法来执行此操作。

:root {
  --primary-rgba: rgba(17,184,106,1);
  --secondary-rgba: rgba(255,255,255,1);
}

@keyframes slidein {
  0% {
    background: transparent;
  }
  25% {
    background: linear-gradient(90deg, var(--secondary-rgba) 0%, var(--secondary-rgba) 50%, var(--primary-rgba) 50% var(--primary-rgba) 100%); 
  }
  50% {
    background: var(--secondary-hex);
  }
  75% {
    background: linear-gradient(90deg, var(--primary-rgba) 0%, var(--primary-rgba) 50%, var(--secondary-rgba) 50% var(--secondary-rgba) 100%); 
  }
  100%   {
    background: transparent;
  }
}

我什至想知道向动画添加更多帧是否会使其按照我想要的方式工作，并尝试在一堆（重复）帧中进行黑客攻击。仍然没有运气。

在发现CSS 过渡可能还不支持渐变之后，我尝试使用背景位置来显示文本，但没有成功。

这些方法中的任何一种都可行吗？

Answer 1

使用背景创建显示的唯一方法是考虑多个背景层，其中一个正在使用background-clip:text，这将允许您还使用背景为文本着色并控制其位置。

这是基于先前答案的示例。诀窍是有两个我们动画相同的图层，然后在最后我们动画顶部的一个使其宽度为 0，同时保持另一个（文本层）的宽度为 100%

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #8ce2ea;
  margin:0;
}

.reveal-text {
  position: relative;
  font-size: 50px;
  color: transparent;
  background-image: 
    linear-gradient(#f2f98b, #f2f98b), 
    linear-gradient(#fff,#fff);
  -webkit-background-clip:
    padding-box,
    text;
  background-clip:
    padding-box,
    text;
  background-size: 0% 100%;
  background-repeat: no-repeat;
  background-position: left;
  animation: revealer-text 0.8s 1s forwards;
}

@keyframes revealer-text {
  0% {
    background-size: 0% 100%;
  }
  50% {
    background-size: 100% 100%;
    background-position: left;
  }
  51% {
    background-size: 100% 100%;
    background-position: right;
  }
  100% {
    background-size: 0% 100%,100% 100%;
    background-position: right;
  }
}

<h1 class="reveal-text">
  I'm here.
</h1>

这可能不适用于所有浏览器，因此如果您想要使用背景的更受支持的方式，您至少需要一个额外的元素，就像我在这里所做的那样Clip-path替代品用于显示文本