CSS3 Animation vs. jQuery Animation

CSS3 Animation vs. jQuery Animation

While working with jQuery on a client project I found that a simple animation of a background image, fading in and out in a loop, was very CPU hungry. Per default it used about 33% of the CPU, which I think, isn’t nice for a very simple animation. The problem actually is the loop, changing the opacity value dynamically over a short period of time. So my first fix was to set the fx.interval to a bigger value with the following code:

jQuery.fx.interval = 60;

In addition I inserted a small stop of 400ms and 800ms when the animation was completed at the point where the element was fully faded in and out. This brought down the CPU to about 13%, which is much better.

Yesterday I read about the new CSS3 animation technique which is hardware accellerated. So today I made a test on my office mac (iMac Core 2 Duo, 2.93 GHz) with the pulsating effect using pure CSS3 animations. If you are interested, here is the code:

.box {
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-name: pulse;
-webkit-animation-duration: 3s;

}

@-webkit-keyframes pulse {
0% {opacity: 0.5;}
30% {opacity: 0.9;}
100% {opacity: 0.5;}
}

I loaded the page (with the jQuery animation disabled) in Safari and guess what? The CPU usage was back at 33%.

I know, my mac isn’t the newest one and you probably get a better result but many visitors won’t have a "better" machine while browsing your site.

What does this all mean? CSS3 animations are terriffic but do use a lot of your processor’s power. There is no way to fine tune the animation with CSS3 the same way you can using a framework like jQuery. So, as long as CSS3 animations aren’t CPU friendly you better stick with jQuery.

VN:F [1.9.22_1171]
Rating: 7.9/10 (10 votes cast)
VN:F [1.9.22_1171]
Rating: +4 (from 8 votes)
CSS3 Animation vs. jQuery Animation, 7.9 out of 10 based on 10 ratings