Bootstrap Progress Bar Animation Using 50% CPU

Question

I have a couple of progress bars on my site <div class="progress-bar progress-bar-striped active"></div>.
These progress bars take up about 50% CPU.
When I remove the class active from all the progress bars the CPU drops drastically.
I would like to have animated progress bars that don't take up so much CPU.
Is this possible?

Answer 1

I saw an answer about CPU usage on CSS animations, they've suggested using:

transform: translateZ(0);

This will composite the elements into their own layers (by tricking the browser into thinking it will be doing 3D transforms) and the browser should, in most cases, take advantage of GPU acceleration, lessening the burden on the CPU. For me this cut it down by about 20% (almost half)