JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

div {
	width: 300px;
	height: 200px;
	
	background-color: rgb(0,0,255);
}

JavaScript

const div = document.querySelector('div');

let redValue = 0;
let blueValue = 255;

const rgbMax = 255;
const rgbMin = 0;

function animateColor () {
	if (redValue < rgbMax) {
		redValue++;
	}
	
	if (blueValue > rgbMin) {
		blueValue--;
	}
	

	div.style.backgroundColor = `rgb(${redValue}, 0, ${blueValue})`;
	
	if (redValue < rgbMax) {
		requestAnimationFrame(animateColor);
	}
}

requestAnimationFrame(animateColor);