Дополнительные примеры анимация градиента
В этих примерах градиенты имеют более контрастные значения, поэтому легче отследить паузы в анимациях
Анимация горизонтального градиента
.crc1 {
fill: url('#grad1');
}
<svg class="the-svg" width="200px" height="200" viewBox="-20 -20 200 200">
<circle class="crc1" cx="50" cy="50" r="50" />
<defs>
<linearGradient id="grad1" x1="0" x2="0" y1="0" y2="0" gradientUnits="userSpaceOnUse">
<stop offset="20%" stop-color="#24bed2"/>
<stop offset="90%" stop-color="#FF00AE"/>
<animate attributeName="x1" dur="4s" values="0;200;200;0" repeatCount="indefinite" />
</linearGradient>
</defs>
</svg>
Для более интересного эффекта выбрал границы перекрытия отличающиеся от 50%
:
<stop offset="20%" stop-color="#24bed2"/>
<stop offset="90%" stop-color="#FF00AE"/>
Анимация вертикального градиента
.crc1 {
fill: url('#grad1');
}
<svg class="the-svg" width="200px" height="200" viewBox="-20 -20 200 200">
<circle class="crc1" cx="50" cy="50" r="50" />
<defs>
<linearGradient id="grad1" x1="0" x2="0" y1="0" y2="0" gradientUnits="userSpaceOnUse">
<stop offset="20%" stop-color="#24bed2"/>
<stop offset="90%" stop-color="#FF00AE"/>
<animate attributeName="y1" dur="4s" values="0;200;200;0" repeatCount="indefinite" />
</linearGradient>
</defs>
</svg>
Анимация градиента под углом с паузами в конечных точках
Анимируем сразу две координаты:
<animate attributeName="x1" dur="5s" values="0;200;200;0" repeatCount="indefinite" />
<animate attributeName="y1" dur="5s" values="0;200;200;0" repeatCount="indefinite" />
.crc1 {
fill: url('#grad1');
}
<svg class="the-svg" width="200px" height="200" viewBox="-10 -10 200 200">
<circle class="crc1" cx="50" cy="50" r="50" />
<defs>
<linearGradient id="grad1" x1="0" x2="0" y1="0" y2="0" gradientUnits="userSpaceOnUse">
<stop offset="10%" stop-color="#24bed2"/>
<stop offset="90%" stop-color="#FF00AE"/>
<animate attributeName="x1" dur="5s" values="0;200;200;0" repeatCount="indefinite" />
<animate attributeName="y1" dur="5s" values="0;200;200;0" repeatCount="indefinite" />
</linearGradient>
</defs>
</svg>
Связанный топик: Создание CSS3 эффекта мигающего века