Are CSS3 properties like animate too CPU intensive

Question

will this repetitive animation code slow down my system?:

@-webkit-keyframes animate {-webkit-animation-iteration-count:infinite;...}

Are all CSS3 properties CPU intensive ?

Thanks.

Answer 1

I had a webpage that had about 15 elements appear to be shaking like an earth quake. The animation is in 10% increments and lasts for 1s. It repeats in an infinite loop. I noticed processor use skyrocket. So I would say yes, but it depends on the animation,

Answer 2

Avoid using box-shadow & text-shadow. Don't try and animate the whole page, or the body element and use translate3d, scale3d, rotate3d as they are hardware accelerated on computers and mobile devices. As stated above, avoid the OVERUSE of animating properties. I however doubt that one or even four infinitely animated elements will slow down your page.

Improving the Performance of your HTML5 App

UPDATE

Beware! Browsers are now dropping hardware acceleration for transform-3D properties. You will have to use other methods to optimize your apps as of now and in the future.

Answer 3

If you use only 3D transforms in your CSS3 animations, e.g:

@keyframes animation { 
    0% { transform: translate3d(288px,123px,0px) rotate(10deg) scale(1,1) }
    50% { transform: translate3d(388px,123px,0px) rotate(20deg) scale(2,2) }
    100% { transform: translate3d(488px,123px,0px) rotate(30deg) scale(3,3) }
}

the CPU usage will be flat after you have instructed the browser to play the animation. This is because 3D transforms are always rendered via GPU acceleration by browsers. (Note: it's enough to set one 3D transform as above to kick in the GPU acceleration).

The following snapshot is taken while running the Chrome CPU profiler:

As you can see, the CPU activity is flat after the CSS3 animation has been instructed using some javascript code (in this case the animation was 2s long).

Answer 4

Each browser has its own implementation of CSS3 and the ways the effects are processed and rendered vary. One browser will choke on certain things while another might not. You're best off just being prudent: don't overuse the CSS3 effects and everything will be fine. If you are really concerned about performance, you can always try to test the site using an old laptop or something. If it chokes - you might have exaggerated with the gradients or something.

As one of my fellow programmers says (in regard to C++ applications, but it's perfectly applicable here): don't worry about performance issues until you actually notice them :).

Answer 5

I would check on CPU usage of the browser when viewing the animation. Some features may not slow down the system, but others may.

It is true that some browsers can act different on certain things. However, I tested using a spinning animation, and it used about 30-50% CPU usage on my 3.5ghz machine, testing with multiple browsers. Whether it was set to infinite iteration or not, it did not matter.

As of right now, certain features may slow down the machine and not be user-friendly. You may want to wait for these features to be optimized before using them. I have a feeling that they were designed inefficiently, because the animation looks smooth on even my iPod touch.

Also note that my browsers were not running GPU acceleration at the time, which could be a factor.