Почему не срабатывает transition на градиенте?
Градиент транзишеном менять нельзя. Но можно сделать 2 блока конкретно для бэкграундов (или например через :before/:after) и менять у них прозрачность.
Нет. Градиент - это background-image, а анимация этого свойства не поддерживается. https://bugzilla.mozilla.org/show_bug.cgi?id=546052
Можно сделать через псевдоэлемент с изменением прозрачности.