打印文本，然后使用 HTML 和 CSS 更改颜色答案

【问题标题】：Print text and then change colour using HTML and CSS打印文本，然后使用 HTML 和 CSS 更改颜色
【发布时间】：2017-03-15 17:29:24
【问题描述】：

我想知道是否可以在一定时间间隔后将<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 }
}

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

【问题讨论】：

所以你想让你的<a>在重新加载后保持红色？
嗨，谢谢你的评论，不是在重新加载之后，我的文本最初是黑色的，在打印语句之后......有一个延迟（2s）......然后文本变成红色。重新加载后，文本应恢复为初始颜色。

标签： javascript html css text colors

【解决方案1】：

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

【讨论】：

您好，谢谢您的回复，是否有无循环版本的关键帧？
你为什么不使用 setTimeout() 方法来做到这一点。
您可以使用它轻松更改颜色。我认为@keyframe 不能在两者之间停止。它将至少运行一次，并再次显示初始情况（在您的情况下为黑色）。