javascript - 使用 HTML 和 CSS 打印文本然后更改颜色

Question

我想知道是否可以更改 <a> 中我的文本的颜色... </a>标签，在一定时间间隔后从黑色变为红色，并保持永久红色。

do {
  document.getElementById("code").innerHTML +="<a>Hello World</a><br>";
  await sleep(...)
  document.getElementById("code").innerHTML +="<a>Hello World</a><br>";
  await sleep(...)
  document.getElementById("code").innerHTML +="<a>Hello World</a><br>";
  await sleep(...)
  document.getElementById("code").innerHTML +="<a>Hello World</a><br>";
} while {...}

此代码运行后，它应该将第一个“Hello World”从黑色更改为红色，然后第二个“Hello World”将打印并将文本颜色从黑色更改为红色，依此类推...

我在这件事上探索过不同的方法...

a {
    animation: change 1s step-end both;
}

@keyframes change {
    from { color: black }
    to   { color: red }
}

但我发现此方法的问题在于，它会在所有包含标签的文本上不断从黑色变为红色，然后再变为红色，并且颜色变化不会保持永久不变。

Answer 1

不要使用@keyframes。因为关键帧在循环中工作。