如何创建这样的动画svg渐变？

Question

I have css animation gradient

 .test { width: 100px; height: 100px; background-image: linear-gradient(90deg,#e2e2e2,#e2e2e2,#e2e2e2,#f2f2f2,#e2e2e2,#e2e2e2,#e2e2e2); background-size: 300% 300%; animation: test 3s linear infinite; } @keyframes test{0%{background-position:150% 150%}to{background-position:-150% -150%}} 

 <div class="test"></div> 

But I need to create it using svg. Then I created it

 .test { width: 100px; height: 100px; } 

 <div class="test"> <svg id="svg-test" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100"> <style type="text/css"> .rect { fill: url(#linear-gradient); } </style> <defs> <linearGradient id="linear-gradient"> <stop offset="0%" stop-color="#e2e2e2" /> <stop offset="43%" stop-color="#e2e2e2" /> <stop offset="50%" stop-color="#f2f2f2" /> <stop offset="57%" stop-color="#e2e2e2" /> <stop offset="100%" stop-color="#e2e2e2" /> </linearGradient> </defs> <rect class="rect" x="-200" y="-200" width="300" height="300"> <animateTransform attributeName="transform" type="translate" from="0 0" to="200 200" begin="0s" dur="1.5s" repeatCount="indefinite" /> </rect> </svg> </div> 

But I have a problem, cause it work greate just with square. I need to work it with all figures. Then I tryed this code

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <defs> <linearGradient id="myG"> <stop offset="0%" stop-color="#f2f2f2"> <animate attributeName="offset" dur="1.5s" from="0" to="1" repeatCount="indefinite" /> </stop> <stop offset="0%" stop-color="#e2e2e2" />> <stop offset="43%" stop-color="#e2e2e2" /> <stop offset="50%" stop-color="#e2e2e2"> </stop> <stop offset="57%" stop-color="#e2e2e2" /> <stop offset="100%" stop-color="#e2e2e2" /> </linearGradient> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#myG)" /> </svg> 

It's better, but not the same, as my css animation. Could you please help me to create svg animation gradient same as css gradient from first example?

Answer 1

How about something like this?

 .test { width: 100px; height: 100px; } 

 <svg class="test" viewBox="0 0 100 100"> <style type="text/css"> .rect { fill: url(#linear-gradient); } </style> <defs> <linearGradient id="linear-gradient"> <stop offset="0%" stop-color="#e2e2e2" /> <stop offset="33%" stop-color="#e2e2e2" /> <stop offset="50%" stop-color="#f2f2f2" /> <stop offset="67%" stop-color="#e2e2e2" /> <stop offset="100%" stop-color="#e2e2e2" /> <animateTransform attributeName="gradientTransform" type="translate" from="-1 0" to="1 0" begin="0s" dur="1.5s" repeatCount="indefinite"/> </linearGradient> </defs> <rect class="rect" x="-100" y="-100" width="300" height="300"/> </svg> 

Answer 2

This animation is created by CSS '@keyfrem' rule. You can create any kind of CSS animation by '@keyfrem'.

You need to understand all about it. Useful link to learn that.

https://www.w3schools.com/css/css3_animations.asp

You can also generate animation by online tools and copy ready-made codes. Like below.

http://cssanimate.com/

You can create CSS gredient from here.

https://www.cssmatic.com/gradient-generator