javascript - How to change text color after X amount of seconds?

Question

this is my code:

<font color=green>
     14:00
</font><br>
<font color=green>
     14:30
</font><br>
<font color=green>
     15:00
</font><br>
........

How can I change color (in red) of every single text after some time has passed?

I have tried this code but obviously it doesn't function (onLoad is only for the body/img tags):

<font color=green onLoad="setTimeout('this.style.color=red',xxx-seconds);">
     14:00
</font><br>

Any suggestions?

Solution adopted (thanks to minitech):

<style>
    @keyframes change {
        from { color: green }
        to   { color: red }
    }
</style>

<span style='animation: change (number-of-seconds)s step-end both;'>
    14:30
</span>
<span style='animation: change (number-of-seconds)s step-end both;'>
    15:00
</span>
.............

Answer 1

You could use CSS animations for this:

font {
    animation: change 3s step-end both;
}

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

Live demo: http://jsfiddle.net/simevidas/7ZrtQ/

In the above code, the delay is defined by 3s which represents 3 seconds.

Btw, if you don't want to have the timer execute on page load, but instead want to have it triggered by some subsequent event (e.g. a user click), you can define the animation in a CSS class, and then just add that class to the element later with JavaScript to trigger the effect.

Live demo: http://jsfiddle.net/simevidas/7ZrtQ/3/