Как плавно сменить фон у body?

Question

[acorn]

Привет!
Есть ссылки при наведении на них меняется фон с градиентом у body, делаю через js.
Но меняется он рывком, хочу сделать плавно, добавляя свойство transition в body и скрипт успехом не увенчались, что делать,что делаю не так?
вот код

html

<ul class='list-social'>
      <li><a class="a-social facebook" href="#">facebook</a> </li>
     /ul>

javascript

var facebook = document.querySelector('.facebook');
 var body = document.querySelector('#body-container');
function face(){
  facebook.onmouseover = function(event){
    body.style.background = 'linear-gradient(to top, #48c6ef,#6f86d6)'
  }
  facebook.onmouseout = function(event){
    body.style.background = ''
  }}; 
face();

Answer 1

[Егор Лавренов]

Градиент не поддается анимации
Только положение и размер (можно поиграться с этим),
Либо использовать box-shadow
css.yoksel.ru/animation-for-gradients

Comments

[ElijahTr]

Только не градиент, а background-image

Answer 2

[Антон Швец]

Можно поверх всего боди натянуть блок с нужным фоном и анимировать его opacity. Или вариант с тенями, как выше писали.
Пока поддержки транзишна градиентов нет.

Answer 3

[aloky]

Как вариант можно псевдоклассом. Пример

Answer 4

[Владислав]

Transition не на все тэги работает корректно)
Знаю он работает нормально с div , то просто можно всё обернуть в блок и задать ему transition и всё должен заработать (это при использование CSS HTML) JS ещё не изучал хз как он с ним работает)

Вот наглядный пример

Answer 5

[Василь Бойко]

https://jsfiddle.net/8tjyms9t/
https://jsfiddle.net/eo8ahr14/