CSS3 animations are overheating my computer!

[Maxime]

Hi there,

Sorry for the (too much) catchy title, but I really need help about CSS3 animations which really make my computer mad.

I have 5 rotating divs with 5 SVG backgrounds on my page and after ~ 30 seconds, my computers fans turns on and it makes the user experience very poor.

My questions are:
– Are SVG background + CSS3 animations a problem for performance?
– Is there a way to make it lighter?

Sorry for the bad english,
Thanks,
Maxime

[Paulie_D]

You computer is working very hard with that much going on.

It’s basically constantly re-rendering the page…so it’s hardly suprising that heat is being generated by the CPU/GPU.

You have to run some rendering tests and examine the actually loading you’re putting on the processors to see what’s actually happening.

It’s not really a CSS issue I suspect…more of an engineering one.

[Maxime]

Thanks Paulie_D for your answer :)

Indeed, CPU/GPU usage is very high. I tested it and each animation add CPU/GPU usage. Is there a solution to have a dynamic rendering or something like that? Or just optimize the performances?

Thanks,

[Paulie_D]

Frankly that’s beyond my expertise so I don’t think I can ofer much more.

I’ll push this over to “Other Dicussions” which, I think, is a better fit.

[Paulie_D]

Note, a quick google for “CSS animations CPU Usage” found this – http://stackoverflow.com/questions/13176746/css-keyframe-animation-cpu-usage-is-high-should-it-be-this-way

I’m sure you can get similar results.

Obviously without knowing exactly what the animations are it’s hard to be more specific.

[Shikkediel]

Here’s a few that I know of that’ll make CSS (and other) animation unnecessarily slow :

Not using transforms, pixel animations that influence document flow work on another thread and make things slow and glitschy.

Fixed position that is also using a permanent CSS transform. Repainting this has a huge impact when scrolling. I noticed this most on webkit browsers and it can be eliminated by using backface-visibility: hidden. The jury’s still out on why exactly but apparently this promotes it to an independent layer.

https://youtu.be/1ZWugkJV5Ks

[Shikkediel]

Anybody know of a way to specify the width of a video by the way? This direct link was all that worked, an embedded iframe (made a bit smaller) only showed some internal forum code and the link itself in plain text.

[Author]

Posts