html - 动画文本以从上到下更改颜色

Question

我有一些想要动画的文本。文本应从上到下从白色变为绿色。我希望新颜色基本上从顶部下降。

body{
background-color: lightblue;
}
#test {
  animation: changeColor infinite;
  animation-timing-function: ease-out;
  animation-duration: 5s;
  font-size: 40px;
  color:white;
}

@keyframes changeColor {
  0% {
    color: linear-gradient(to bottom, white, #2E7D32 50%) bottom;
  }
  100% {
    color: green;
  }
}

<div id="test">The</div>

---

一个例子

以下代码段的来源。以下动画发生在悬停时，但这只是演示我希望实现的目标的示例。我需要的一些更改是字体颜色应该从上到下变化并且应该使用keyframes（动画）。

@import url("https://fonts.googleapis.com/css?family=Barlow:800&display=swap");
* {
  box-sizing: border-box;
}

*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: "Barlow", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 100vh;
}

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position 275ms ease;
  text-decoration: none;
}

a:hover {
  background-position: 0 100%;
}

<a href="#">Link Hover</a>

标签： htmlcss

Answer 1

我想出了如何完成，所以我正在回答我自己的问题。

let titleIDThe = document.getElementById("titleIDThe");
titleIDThe.classList.add("animateColor");

.animateColor {
  animation: changeColor infinite;
  animation-timing-function: ease-out;
  animation-duration: 10s;
  background-image: linear-gradient(to bottom, red 50%, #2E7D32 50%);
  background-position: 0% 0%;
  background-size: 100% 200%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  width: 50vw;
  height: 50vh;
  font-size: 30px;
}

@keyframes changeColor {
  0% {
    background-position: 0% 0%;
  }
  20% {
    background-position: 0% -100%;
  }
  30% {
    background-position: 0% -100%;
  }
  50% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 0% 0%;
  }
}

<span id="titleIDThe">The</span>