Q:

анимация SVG элемента с градиентом

Добрый день уважаемые.  Подскажите, пожалуйста кто знает, как реализуется анимация повышения коэффициента прозрачности для SVG элементов, фон у которых задан градиентом.  Приведу простой пример. 

.st1 {
  fill: url(#SVGID_1_);
}
<svg version="1.1" id="heart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400 355" style="enable-background:new 0 0 400 355;" xml:space="preserve">
  <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="200.045" y1="176.35" x2="200.045" y2="234.02">
    <stop offset="0" style="stop-color:#000000" />
    <stop offset="0" style="stop-color:#000000" />
    <stop offset="0" style="stop-color:#000000" />
    <stop offset="4.293300e-002" style="stop-color:#000000;stop-opacity:0.8" />
    <stop offset="5.000000e-002" style="stop-color:#000000;stop-opacity:0.5" />
    <stop offset="7.944028e-002" style="stop-color:#000000;stop-opacity:0.1" />
    <stop offset="1" style="stop-color:#000000;stop-opacity:0" />
  </linearGradient>
  <rect x="171.2" y="48" class="st1" width="57.7" height="256.7" />
</svg>

Желательно без применения JS, средствами CSS.  Как постепенно (скажем за 1 сек) Вывести для вей фигуры opacite: 1 ? 

A:

Подправил после уточнений
Надо немного изменить свойство <stop>
И добавить ему анимацию
 <stop offset="1" style="stop-color:#000000;stop-opacity:0">
   <animate attributeName="stop-opacity" values="0; 1" dur="3s" repeatCount="indefinite"></animate>
 </stop>

.st1 {
  fill: url(#SVGID_1_);
}
<svg version="1.1" id="heart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400 355" style="enable-background:new 0 0 400 355;" xml:space="preserve">
  <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="200.045" y1="176.35" x2="200.045" y2="234.02">
    <stop offset="4.293300e-002" style="stop-color:#000000;stop-opacity:0.8" />
    <stop offset="5.000000e-002" style="stop-color:#000000;stop-opacity:0.5" />
    <stop offset="7.944028e-002" style="stop-color:#000000;stop-opacity:0.1" />
    <stop offset="1" style="stop-color:#000000;stop-opacity:0">
    <animate attributeName="stop-opacity" values="0; 1" dur="3s" repeatCount="indefinite"></animate>
    </stop>
  </linearGradient>
  
  <rect x="171.2" y="48" class="st1" width="57.7" height="256.7" />
</svg>

