Animating background color to transition through colors on html element causes 100% cpu load

I'm trying to create an effect where small dots on the html background gradually change color in an infinite loop. I have a 960px 开发者_StackOverflow社区centred design so the background area can get quite large.

My solution was to set the background-color to a default color then tile a square grey image with a transparent corner knocked out over the top - so it shows the background through it.

I've then used the jQuery UI libabry to animate the changing background color:

  $("#root")   
      .animate({fontSize:"1em"},pause)          
      .animate( { backgroundColor: 'blue' }, transition)
      .animate({fontSize:"1em"},pause)      
      .animate( { backgroundColor: 'darkred' },transition);

This works but theres a big problem!

During the period where the backgroundColor is transitioning my CPU (firefox) usage goes to 100%.

so,

Is this the solution you would use?

If it is any ideas how to sort out the CPU usage?

Also how do you loop the animations?

Instead of using jquery, maybe you should consider replacing your dot background with animated GIFs or PNGs?

The 100% CPU utilization seems to be a common thread among long-running jquery animations, from what I've read on SO.

If your animations happen slowly, instead of doing a single .animate() call to go from 'blue' to 'darkred', try using a timer to make the animation happen in tiny increments (every 100ms or so).

Or use an animated GIF as suggested above. It would save you lots of hassle.