How to make a animated SVG?

Such cases.

There is SVG, which is superimposed on a gradient (by using <defs><lineargradient></lineargradient></defs>)
And you want to hang an overflow (glare) on a gradient on this SVG.
Now I see one way: to sit like a fool to iterate through each color in the gradient keyframe to achieve the desired result. But this, in my opinion, idiocy.

Sure, there are ways easier.
Anyone know of such methods, not to iterate through each color, and maybe to put on top?
Or maybe just the offset of this gradient will go for overflow - but how to do it from CSS, if it is the attribute of the offset?
July 2nd 19 at 17:03
2 answers
July 2nd 19 at 17:05
Or maybe just the offset of this gradient will go for overflow - but how to do it from CSS, if it is the attribute of the offset?

Will do. Make two identical gradient, and each animeready like this:
from {
 transform: translateY(-100%);
}
to {
 transform: translateY(100%);
}


The delay only put one of them
July 2nd 19 at 17:07
codepen.io/Geyan/pen/MbyXmq is the first example without svg
https://developer.mozilla.org/en-US/docs/Web/SVG/E... it with svg (there is a sandbox example)

Find more questions by tags SVGFrontendCSS