simple text animation in JavaScript/DHTML/canvas

Let's say I have some text as follows:

do this, do that,

then this, then that

I use CSS to add a drop shadow.

I can also use CSS to add a yellow glow behind "do this", as described here: http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/

What I want is a repeating animation:

1 second: make "do this" glow, everything else is drop shadow
1 second: make "do that" glow, everything else is drop shadow
1 second: make "then this" glow, everything else is drop shadow
1 second: make "then that" glow, everything else is drop shadow This should repeat on endless loop.

How do I write this animation?

Solution

Feel free to use:

    <!DOCTYPE html>
    <html>
      <head>
        <title>Jevgenis Animation</title>
        <script type="text/javascript">
          var c = -1;
          var els = new Array("el1", "el2", "el3", "el4");
          function nextEffect() {
            for(i = 0; i <= 3; i++)
              document.getElementById(els[i]).style.textShadow = "2px 2px #FF3333";
            c = c >= els.length - 1 ? 0 : c + 1;
            var e = document.getElementById(els[c]);
            e.style.textShadow = "0 0 3px #FF3333";
          }
        </script>
        <style type="text/css">
          .shadow { text-shadow: 2px 2px #FF3333 }
        </style>
      </head>
      <body onload="setInterval('nextEffect()', 1000);">
        <span id="el1" class="shadow">do this</span>
        <span id="el2" class="shadow">do that</span>
        <span id="el3" class="shadow">then this</span>
        <span id="el4" class="shadow">then that</span>
      </body>
    </html>

Tested it, works fine in FF, Opera, Chrome, Safari.

For IE, you should probably implement something similar:

el1 { filter:
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=45)
progid:DXImageTransform.Microsoft.Glow(Color=#bbbbbb,Strength=2)
progid:DXImageTransform.Microsoft.blur(pixelradius=5, enabled='true')}