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

Question

I was wondering if it is possible to change the colour of my text inside the <a> ... </a> tags, from black to red after a certain time interval and remain permanently red.

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 {...}

and after this code runs, it should change the first "Hello World" from black to red, then the second "Hello World" will print and change that text colour from black to red, and so on...

I have explored different methods on this matter...

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

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

but what I found to be the problem with this method is that it constantly changes from black to red and back on all the text containing the tags, and the colour change does not remain permanent.

Answer 1

don't use @keyframes. because keyframes works in a loop.