Is it possible to animate stroke gradient? - css

Question

Is it possible to animate gradient for rectangular/circle/closed paths?
This example only hard switches between two gradients
Codepen
SVG - circle and path with two defined gradients
<svg width="900" height="500" viewBox="0 0 300 300">
<defs>
<linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#00bc9b" />
<stop offset="100%" stop-color="#5eaefd" />
</linearGradient>
<linearGradient id="gradient2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#333" />
<stop offset="100%" stop-color="#fff" />
</linearGradient>
</defs>
<path transform="translate(-200,-200)" d="M 100 300 Q 150 50 200 250 Q 250 550 350 350 Q 350 50 400 250 C 450 550 450 50 500 300 C 550 50 550 550 600 300 A 50 50 0 1 1 100 300 " />
<circle cx="200" cy="200" r="200" />
</svg>
CSS
circle, path {
stroke: red;
stroke-width: 20px;
fill: transparent;
animation-name: stroke;
animation-duration: 1s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes stroke {
from {
stroke: url(#gradient1);
}
to {
stroke: url(#gradient2);
}
}

Answer 1

You can use SMIL animations although SMIL animations are not supported in IE & Edge.
svg{width:90vh}
rect {
stroke: url(#gradient1);
}
<svg viewBox="0 0 500 300">
<defs>
<linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#00bc9b">
<animate attributeName="stop-color" attributeType="CSS" values="#00bc9b;#333;#00bc9b;" dur="5s" repeatCount="indefinite"></animate>
</stop>
<stop offset="100%" stop-color="#5eaefd">
<animate attributeName="stop-color" attributeType="CSS" values="#5eaefd;#f00;#5eaefd;" dur="5s" repeatCount="indefinite"></animate>
</stop>
</linearGradient>
</defs>
<rect width="400" height="200" x="10" y="20"
stroke-width="20"
fill="transparent"
>
</rect>
</svg>