[johnvaluk]

Why does CSS animation consume so much CPU? I've been trying to use it in my own projects, but the fans kick in even with a single simple continuous animation. Unfortunately, this (awesome!) example is no exception.

[underwater]

If you're really interested you can dig into `about:tracing`. It looks like the majority of the slowdown (for what it is) is the document recalculating styles for the `transform` property.

[speedgoose]

It may be an issue with your machine.

[Sesse__]

They don't really seem to be using a lot of CPU here? I did a quick tracing of the flying toasters screensaver, and the Chrome profiler says that a random frame I picked out used:

0.23 ms in recalc style

61 µs in pre-paint

17 µs in paint

67 µs in compositing

That doesn't sound too bad to me?

[juddgaddie]

Are you running Linux or Windows? On Linux some GPU accelerated functions are disabled. chrome://gpu/ or firefox - about:support

[Tade0]

It's probably not the CPU, but the integrated GPU. Browsers are hardcoded to use that instead of the discrete GPU.