Как сделать переход с помощью transition c одного цвета градиента на другой

#html #css #css3 #svg #анимация

Необходимо сделать плавный, красивый переход с одного основного цвета градиента,
например красного на синий. 

Код примера: 



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




Для плавности нужно использовать анимацию при наведении курсора на svg элемент.
    

Ответы

Ответ 1

Вариант #1

В начальном состоянии градиент имеет один цвет - красный

 
    


При наведении курсора градиент состоит из двух цветов:  

.crc1:hover ~ defs stop:first-child {
  stop-color: #24bed2;
}
.crc1:hover ~ defs stop:last-child {
  stop-color: #32ffe4;
}


Ниже полный код



.crc1 {
  fill: url('#grad1');
}
.crc1 ~ defs stop {
  transition: 2s;
}

.crc1:hover ~ defs stop:first-child {
  stop-color: #24bed2;
}
.crc1:hover ~ defs stop:last-child {
  stop-color: #32ffe4;
}





Вариант #2

Двухцветный градиент. 

Техника реализации та же, что и в первом варианте, но в начальном и конечном состоянии
анимации у градиента два цвета меняются на два других цвета.   

При подборе цветовой гаммы можно найти интересные варианты.  

Например:  вариант ниже напоминает море, когда на смену ночи приходит яркий, солнечный
день.  



.crc1 {
  fill: url('#grad1');
}
 .crc1 ~ defs stop {
  transition: 3s;
}

.crc1 ~ defs stop:first-child {
  stop-color: #24bed2;
}
.crc1:hover ~ defs stop:last-child {
  stop-color: #F4FFAF;
} 





 Вариант #3

Анимация градиента для текста   



.crc1 {
  fill: url('#grad1');
}
.crc1 ~ defs stop {
  transition: 2s;
}

.crc1 ~ defs stop:first-child {
  stop-color: dodgerblue;
}
.crc1:hover ~ defs stop:last-child {
  stop-color: gold;
}