CSS Animation Performance



We have chosen electron to provide user interface on our devices to our customers, however we are observing that with CSS animation, such as pulsating a touch on the screen, takes almost 100% of a CPU core. Our ARM Cortex-A7platform does have Mali400 MP GPU available, with electron running with –use-gl=egl, this is what the chrome://gpu reported:

Graphics Feature Status:
Canvas: Software only; accelerated 2d canvas is unstable in Linux at the moment (2015)
Flash: Hardware Accelerated
Flash Stage3D: Software only
Flash Stage3D Baseline profile: Software only
Compositing: Hardware Accelerated
Multiple Raster Threads: Disabled
Rasterization: Software only
Threaded Rasterization: Enabled
Video Decode: Software only
Video Encode: Hardware Accelerated
WebGL: Hardware Accelerated

So I have the following question:

1> which GPU feature is CSS animation suppose to utilize out of the list?
2> has electron implemented the support to utilize GPU for CSS animations?
3> if not, is there any plan for that down the pipeline?

Thanks in advance for your answers and comments,


Electron uses Chromium, the open source components of Google’s Chrome, as its rendering engine. So in that light:

  1. I don’t personally know, though others here might
  2. Electron doesn’t implement anything this low-level, it relies on Chromium for those features
  3. You would have to take a look at what information the Chromium team publishes


Not sure, but usually the CSS3 properties that trigger the GPU are 2D and 3D transforms. So if you are animating using transforms you should see a great performance increase instead of top, left, etc.


I was using the new animation api and I got 45% of CPU when I was doing a simple transitions from one point to another, and this behavior was the same using a transion class with pure css3. So I decided don’t do it. We have to remember that behind the render process there is a lot of process more. I’m not sure but in 3d stuffs, even in 2d, almost everyting most be recalculated, so that’s mean repainted. Therefor is something spected; as says @Pier, you should see a great performance increase.