I'm experimenting with the most efficient way (in terms of CPU / battery usage) to make a small equalizer animation that will appear multiple times on a page.
I've tried CSS animations, CSS transitions, canvas drawing, and a plain GIF (and more not listed here!). I'd expect the CSS animations and transitions to be completely GPU powered, but Chrome 39.0.2171.99 on my Macbook Air 10.10 uses large amounts of CPU (shown in both the Chrome Task Manager as well as Activity Monitor). I've set layout boundaries via overflow: hidden, checked paint rects, etc.
Here are the different tests:
- JS-triggered Transitions (40% CPU chrome): http://s.codepen.io/kirbysayshi/debug/YPZgbY (code)
- scale3d animation (20% CPU chrome): http://s.codepen.io/kirbysayshi/debug/myWQyW (code)
- translate3d animation (40% CPU chrome): http://s.codepen.io/kirbysayshi/debug/gbmBym (code)
- canvas (12% CPU chrome): http://s.codepen.io/kirbysayshi/debug/MYpBgZ (code)
- Plain old gif (12% CPU chrome): http://s.codepen.io/kirbysayshi/debug/yyMPMr (code)
Caveats:
- the GIF is running at ~25 fps, as is the canvas animation via manual setTimeout
- The GPU process in the chrome task manager does consume time for each of these
- I tried the typically-non-hardware accelerated properties like
scale()andtranslate(), and the CPU usage was rougly the same!