simple text animation in JavaScript/DHTML/canvas -

Assuming I have some text as follows:

Do this so / P>

then this, then

I use CSS to add a drop shadow.

I use CSS "what to do", as outlined here:

What do I need to repeat animation:

• 1 Second: "Do this" brightness, everything else is drop shadow
• 1 second: "do this" brightness, everything else is drop shadow
• 1 second: "So this" Glow, everything else is a drop shadow
• 1 second: "Then shine, everything else is drop shadow, repeat it on endless loop.

How do I write this animation?

Feel free to use:

  & lt; ! DOCTYPE html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Title & gt; Javijin Animation & lt; / Title & gt; & Lt; Script type = "text / javascript" & gt; Var c = -1; Var Els = New Array ("L1", "L2", "L3", "L4"); Next effect for the function () {for (i = 0; i & lt; = 3; i ++) document. GetElementById (ELS [i]). Style.textShadow = "2px 2px # FF3333"; C = c & gt; = Els.length - 1? 0: C + 1; Var E = document.getElementById (ELS [C]); E.style.textShadow = "0 0 3px # FF3333"; } & Lt; / Script & gt; & Lt; Style type = "text / css" & gt; .shadow {text-shadow: 2px 2px # FF3333} & lt; / Style & gt; & Lt; / Head & gt; & Lt; Body onload = "setInterval ('next effect ()', 1000);" & Gt; & Lt; Span id = "el1" square = "shadow" & gt; Do this & lt; / Span & gt; & Lt; Span id = "el2" class = "shadow" & gt; Such as & lt; / Span & gt; & Lt; Span id = "el3" class = "shadow" & gt; So it & lt; / Span & gt; & Lt; Span id = "el4" class = "shadow" & gt; So that & lt; / Span & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

It was tested, works fine in FF, Opera, Chrome, Safari.

For IE, you should probably implement something like this:

  AL1 {Filter: Prozed: Dximage LettersForm. Microsoft. Shadow (Color = # 666666, Direction = 45) Project: DXimage LettersForm. Microsoft. Glow (Color = #BBBBBB, Strength = 2) Project: DXIMAGE Transforms Microsoft. BlueTit (pixeladia = 5, enabled = 'true')}