如何为另一个渐变填充属性设置动画？

Question

使用专色，动画会逐渐从红色变为蓝色，再通过调色板。但是当我尝试使用渐变时，它不会逐渐起作用。如何为渐变的颜色设置动画？

 <style>
  @keyframes gradAzul{  

    /*  How it works correctly, the color ranges from red to blue, passing through the color palette progressively.
    0% {fill: red;}
    50% {fill: blue;}
    100% {fill: red;}*/  

    /* why not work well with gradients?*/
    0% {fill: url(#linearGradient4555);}
    50% {fill: url(#linearGradient4555-6);}
    100% {fill: url(#linearGradient4555);}
}
</style>  
<script>  
    window.onload = function(){  
        var s = Snap('#pruebasSVG');   
        Snap.load('svg/GradientAnimate.svg', function(f){  
        s.append(f);                
        }    
     );  

       setTimeout(function(){
          var el = document.getElementById('rectRojo1');          
          el.style.animation =  "gradAzul 30s infinite";        
       }, 1000);
    }
</script>
<div id="pruebasSVG" />  

  <!-- GradientAnimate.svg (Inkscape-Plane)summary -->
<svg>  
<defs
 id="defs4165">
<linearGradient
   gradientUnits="userSpaceOnUse"
   y2="-185.85931"
   x2="495.56671"
   y1="-91.988457"
   x1="493.22672"
   id="linearGradient4555"
   xlink:href="#Rojo1"
   gradientTransform="translate(-108.90474,694.62238)" />
<linearGradient
   id="Rojo1">
  <stop
     style="stop-color:#e4a2a8;stop-opacity:1"
     offset="0"
     id="stop4550" />
  <stop
     style="stop-color:#e7aeb3;stop-opacity:0.63137257"
     offset="1"
     id="stop4552" />
</linearGradient>
<linearGradient
   gradientUnits="userSpaceOnUse"
   y2="-209.63554"
   x2="494.16812"
   y1="-91.988457"
   x1="493.22672"
   id="linearGradient4555-6"
   xlink:href="#Azul1"
   gradientTransform="translate(-110.1541,933.30862)" />
<linearGradient
   id="Azul1">
  <stop
     id="stop4655"
     offset="0"
     style="stop-color:#b3bdde;stop-opacity:1" />
  <stop
     id="stop4657"
     offset="1"
     style="stop-color:#afbfdd;stop-opacity:0.63137257" />
</linearGradient>  
</defs>  

  <g>
   <rect
   style="opacity:1;fill:url(#linearGradient4555);fill-opacity:1;fill-rule:nonzero;stroke:#bc969a;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.36470588;enable-background:new"
   id="rectRojo1"
   width="317.92719"
   height="217.08684"
   x="224.42854"
   y="389.04852" />
   <rect
   style="opacity:1;fill:url(#linearGradient4555-6);fill-opacity:1;fill-rule:nonzero;stroke:#91a7d0;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.36470588;enable-background:new"
   id="rectAzul1"
   width="317.92719"
   height="217.08684"
   x="223.17926"
   y="627.73474" />  
 </g>  
</svg>