How to make a background gradient animation that does not load the CPU?

Question

css

An example that is CPU intensive and doesn't work in Firefox
UPD The steps property suggested by AngReload reduced the load but reduced the smoothness. + Found a bug in Firefox (on SVG gradients move incorrectly, as it shifts the path to the left by 100% from 125% set in the width property).
UPD2 I invite an expert Evgeny Petrov

Answer 1

Use animation-timing-function: steps instead of linear, because the animation is very smooth, you can reduce the frame rate.
$animation steps: 100;
codepen.io/anon/pen/BKoqpm?editors=1100

Answer 2

Webgl
The load will be zero if you do it through the shader.