How to make a JavaScript function use less memory (image rotation in background)

I have a function which rotates a background image on a webpage really slowly (it's a starfield). The function is as follows:

function 开发者_运维问答changeAngle() {
            setAngle = setInterval(bgrotate,50);
        }

        function bgrotate(){
            i+=0.1;
            var sCSS= ("rotate(" + i + "deg)");
            $("#starfield").css({ '-moz-transform': sCSS, '-o-transform': sCSS, '-webkit-transform': sCSS });
        }

The image it's rotating is 610kB.

It works really well, but I've noticed that the fan on my machine really heats up when I'm running the page. I've checked the activity monitor and the CPU is up at around 85%.

Anyone any ideas how I can streamline this a bit to reduce CPU usage? If you need, I can put up a demo version of the page to see it running.

Thanks a mill,

T

UPDATE: Demo of this page available here: http://tady.me/rbg

FINAL QUESTION ON THIS: Hi folks, I may need to start a new question, but just in case any of the people who helped originally can tell me, any idea why this wouldn't be working in Safari (Mac + PC) or Firefox (PC Only)?

Cheers,

T

---

You should try doing this with CSS (using the transition or animation timing properties) rather than with JavaScript.

https://developer.mozilla.org/en/css/css_transitions

Demo (webkit): http://jsfiddle.net/E9J77/2/

Unfortunately Firefox still doesn't support CSS animations.

Here's a work around for Firefox using the transitionend event:

Demo (Firefox): http://jsfiddle.net/VZhnh/3/

---

Interesting technique -- I also want to see a demo.

What about increasing the interval? Have you tried 100 ms and rotate .2degs?

---

I would suggest making the interval slightly larger, but then also increasing the distance each rotation gives.

I would also suggest saving #starfield to a global variable, to decrease DOM access

(of course, transitions only work in Firefox, Safari and I think chrome)