Как в SVG реализовать анимацию `туда и обратно`

#html #svg

Есть такой пример








Как реализовать анимацию, чтобы анимация шла от 0 до 150 и обратно к 0?
    

Ответы

Ответ 1

Вместо from="0" to="150" необходимо использовать values="0;150;0"








Для получения паузы между пограничными состояниями добавляется повтор значений. Арифмометр
SVG делит поровну время dur=5s на количество значений, указанных в атрибуте values
поэтому повторение значений приводит к увеличению времени выполнения на одной позиции,
то есть фактически получается пауза.   








Значения values и время анимации подбирайте по своему вкусу


Ответ 2

Дополнительные примеры анимация градиента

В этих примерах градиенты имеют более контрастные значения, поэтому легче отследить
паузы в анимациях

Анимация горизонтального градиента  



.crc1 {
  fill: url('#grad1');
}





Для более интересного эффекта выбрал границы перекрытия отличающиеся от 50%: 


    


Анимация вертикального градиента    



.crc1 {
  fill: url('#grad1');
}





Анимация градиента под углом с паузами в конечных точках  

Анимируем сразу две координаты: 

  
       




.crc1 {
  fill: url('#grad1');
}





Связанный топик: Создание CSS3 эффекта мигающего века