Thanks to the assistance of (Jan) in my previous inquiry, I successfully tackled the issue of automatic background modification.
You can view my previous question here: Automatic background change with JavaScript and CSS
However, after changing the background, there is a noticeable color transition/jump. My preference is for the color alteration to occur smoothly and without any abrupt changes.
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);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;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body id="background"></body>