Почему не работает transition для градиента?

Question

[ymfront]

Есть блок, при наведении на который должны плавно меняться цвет обводки и градиент.
Делаю это следующим образом:

.answer_text_block {
	border: 1px solid rgba(97, 1, 255, 0.40);
	background: radial-gradient(82.08% 72.29% at 52.19% 8.07%, #3F01A6 0%, #0B002B 100%);
	transition: all 0.7s ease-out;
}

.answer_item:hover .answer_text_block {
	border: 1px solid #6101FF;
	background: radial-gradient(82.08% 72.29% at 52.19% 8.07%, #3F01A6 51.5%, #0B002B 100%);
}

Обводка меняется плавно, а градиент меняется без анимации.
В чем проблема? Пробовал также linear-gradient, проблема та же.
Также если убрать градиент и сделать одноцветный фон, то все работает нормально.

Answer 1

[Виталий Першин]

Градиент нельзя анимировать, хотя может через переменные уже как-то можно выкрутиться. Знаю несколько вариантов, в зависимости от того какая анимация нужна. Можно сместить позицию таким образом:


Либо наложить поверх невидимый градиент, чтобы он появлялся при наведении:

Answer 2

[Ankhena]

Почему не работает transition для градиента?

Потому что bg image не анимируется.

https://css-tricks.com/property/

Comments

[Виталий Першин]

в firefox не работает

[Ankhena]

Виталий Першин, уже видно версию в которой заработает. А поскольку вопросы-ответы отсюда отлично гуглятся, то и пригодятся уже скоро.

[Виталий Першин]

Ankhena, Я просто уточняю, потому что многие сидят с хрома и не всегда тестируют в разных браузерах..