使用JavaScript和CSS实现背景自动切换（二）：解决切换跳变问题

此前在Jan的帮助下，我已实现用JavaScript和CSS自动切换背景的功能，但当前切换时存在明显的颜色跳变，希望实现平滑无跳变的缓慢颜色过渡效果。

以下是我的现有代码实现：

JavaScript 代码 #

var i = 0;
function changeBackgroundColor() {
  var background = document.getElementById("background");
  if (i % 2 === 0) {
    background.classList.remove("background-body");
  } else {
    background.classList.add("background-body");
  }
  i = i + 1;
}
setInterval(changeBackgroundColor, 3 * 1000);

CSS 代码 #

html,body{
  width: 100%;
  overflow-x: hidden !important;
  height: 100%;
  overflow-y: hidden !important;
}
#background{
  width: 100%;
  height: 100%;
  background: #39c787;
  background-image: -webkit-gradient(linear, 15% 0%, 75% 84%, from(#ca83ddc4), to(#7874e3f3), color-stop(70%, #dfa450ab));
  transition: all 5s ease;
  -webkit-transition: all 5s ease;
  -moz-transition: all 5s ease;
  -o-transition: all 5s ease;
  -ms-transition: all 5s ease;
}
.background-body{
  background: #e0922d !important;
  background-image: -webkit-gradient(linear, 15% 0%, 75% 84%, from(#9283ddc4), to(#22ff12d1), color-stop(70%, #c550dfab)) !important;
  transition: all 5s ease;
  -webkit-transition: all 5s ease;
  -moz-transition: all 5s ease;
  -o-transition: all 5s ease;
  -ms-transition: all 5s ease;
}

HTML 代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body id="background"></body>

内容的提问来源于stack exchange，提问作者php