Как сделать плавный переход градиента?
Градиенты нельзя анимировать в рамках CSS "в лоб". Но можно сделать несколько элементов с разными градиентами друг над другом и менять им прозрачность:

snippet
Вот список свойств, которые можно анимировать, и background-image среди них нет. Т.е. оно меняется, конечно, но плавности не ждите.

Варианты обхода:
Можно сделать градиентную подложку бОльшего размера и плавно ее сдвигать.
Можно сделать несколько слоев подложки и менять им прозрачность.