Are CSS3 properties like animate too CPU intensive?

css css-transitions hardware-acceleration
Rajkamal Subramanian picture Rajkamal Subramanian · Dec 6, 2011 · Viewed 9.2k times · Source

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

mingos picture mingos · Dec 6, 2011

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

Related questions

Why does enabling hardware-acceleration in CSS3 slow down performance?

I am moving 6000 small div elements in an css3 experiment using a transition from top: 0 to top: 145px to test performance. Using no hardware-acceleration runs smooth on Google Chrome. If I enable hardware-acceleration via translateZ(0) performance becomes horrible. Why is …

Read More
Transitions on the CSS display property

I'm currently designing a CSS 'mega dropdown' menu - basically a regular CSS-only dropdown menu, but one that contains different types of content. At the moment, it appears that CSS 3 transitions don't apply to the 'display' property, i.e., you …

Read More
Using CSS for a fade-in effect on page load

Can CSS transitions be used to allow a text paragraph to fade-in on page load? I really like how it looked on http://dotmailapp.com/ and would love to use a similar effect using CSS. The domain has since been …

Read More