打印文本，然后使用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。 因為關鍵幀是循環工作的。