title: How to change text color after X amount of seconds?
body: <p>this is my code:</p>
  
  <pre><code>&lt;font color=green&gt;
       14:00
  &lt;/font&gt;&lt;br&gt;
  &lt;font color=green&gt;
       14:30
  &lt;/font&gt;&lt;br&gt;
  &lt;font color=green&gt;
       15:00
  &lt;/font&gt;&lt;br&gt;
  ........
  </code></pre>
  
  <p>How can I change color (in red) of every single text after some time has passed?</p>
  
  <p>I have tried this code but obviously it doesn't function (<code>onLoad</code> is only for the body/img tags):</p>
  
  <pre><code>&lt;font color=green onLoad="setTimeout('this.style.color=red',xxx-seconds);"&gt;
       14:00
  &lt;/font&gt;&lt;br&gt;
  </code></pre>
  
  <p>Any suggestions?</p>
  
  <p><strong>Solution adopted (thanks to minitech):</strong></p>
  
  <pre><code>&lt;style&gt;
      @keyframes change {
          from { color: green }
          to   { color: red }
      }
  &lt;/style&gt;
  
  &lt;span style='animation: change (number-of-seconds)s step-end both;'&gt;
      14:30
  &lt;/span&gt;
  &lt;span style='animation: change (number-of-seconds)s step-end both;'&gt;
      15:00
  &lt;/span&gt;
  .............
  </code></pre>