6

will this repetitive animation code slow down my system?:

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

Are all CSS3 properties CPU intensive ?

Thanks.

Lorenzo Polidori
  • 10,332
  • 10
  • 51
  • 60
Rajkamal Subramanian
  • 6,884
  • 4
  • 52
  • 69
  • They will get CPU-intensive if you abuse them. That is all. – BoltClock Dec 06 '11 at 12:47
  • 2
    And no, not "all" the properties are CPU-intensive. What makes you think `box-shadow` or `box-sizing` are going to kill a Pentium? – BoltClock Dec 06 '11 at 12:50
  • 1
    they are :( for example animating background-position takes 100% cpu in all browsers :( – Alex Dec 13 '12 at 18:20
  • some basic garbage collecting + detecting where the user is in the viewport, and thus animating only visible areas, should be enough. Keep in mind css3 transforms are only intervals ranging a property from a start value to an end value, incrementing/decrementing on each loop by a very small delta.. – chesscov77 Jul 28 '14 at 18:02

5 Answers5

6

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 :).

mingos
  • 23,778
  • 12
  • 70
  • 107
  • Indeed. It depends on the system, and how you use the properties. Big fixed background images can make scrolling really jerky even on modern systems, if I remember correctly. – Paul D. Waite Dec 06 '11 at 18:15
4

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,

Robenter
  • 41
  • 1
4

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.

  • 1
    I'm curious. Where did you get that information? Can you show a link to a reference where it's said that browsers are dropping GPU acceleration for 3D transform rendering? Wherever I read, I see the opposite. – Lorenzo Polidori Jan 23 '14 at 07:50
  • 1
    For example, see [this page](http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome) on GPU acceleration in Chromium. – Lorenzo Polidori Jan 23 '14 at 07:56
1

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:

enter image description here

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).

Lorenzo Polidori
  • 10,332
  • 10
  • 51
  • 60
1

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.

Mark
  • 11
  • 2