Search code examples
csscss-transitionshardware-acceleration

Are CSS3 properties like animate too CPU intensive?

will this repetitive animation code slow down my system?:

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

Are all CSS3 properties CPU intensive ?

Thanks.

Solution

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