jQuery auto background color transition

I tried many ways I found it very simple for me but one thing I can't figure it out. Changing background automatically is working well but it happens very quickly. I wonder is there a solution to make it slow transition now it is very sharp and not user friendly.

<script>

$("body").css("transition","all 3s");
var colors = ["#c11733","#c0392b","#66cc99","#27ae60","#745380"];
function changeBgColor(){
   $("body").css({
        backgroundColor : colors[parseInt(Math.random() * 3)]
      });
}
//changeBgColor();
setInterval(changeBgColor, 3000);

</script>