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

Привет!
Есть ссылки при наведении на них меняется фон с градиентом у 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();