Change background color with animate() method of jquery

Question

I am trying to change the background of the body using jquery animate function of jquery. What I want to do is change background color randomly with animation.here is my Code

 $(document).ready(function() {
  $.ajaxSetup({ cache: false });
 $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
  $("#text").append(a[0].content + "<p>— " + a[0].title + "</p>")});
});

var myarray = ['#FFC300','#FF5733','#C70039','#B5FF33',
 '#22D697','#72EEC3'];

  $("#button1").click(function(){
    $('#text').empty();
     var rand = myarray[Math.floor(Math.random() * myarray.length)];
     $("body").animate({background:rand},1000);
    $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
  $("#text").append(a[0].content + "<p>— " + a[0].title + "</p>")
});

   }); 

the line which I have written for changing background color is this

$("body").animate({background:rand},1000);

This line is not working as expected. but If I change this line with

$("body").css("background",rand);

It is working. Can we use the animate and CSS property of jquery together? here is full code https://codepen.io/durgeshtanwar/full/MpvMZg/ codepen link of this program click on get new quote to see the effect I am referring.