многоцветный крест затухает в jquery или javascript

Question

Я искал (действительно), но не могу найти, как это сделать точно ... Я хотел бы перечеркнуть несколько цветов (переход градиента) так же, как и я здесь (но он просто показывает три цвета). Я бы хотел, чтобы в итоге получилось сочетание двух цветов при переходе.

Это где я сейчас, не имея представления о том, как реализовать Плавный переход:

var colors = ['red', 'green', 'blue']; 
var active = 0; 
setInterval(function(){ 
    document.querySelector('body').style.background = colors[active % colors.length]; 
    active++; 
}, 5000); 

Answer 1

Вам просто нужно установить transition CSS property.

var colors = ['red', 'green', 'blue']; 
 
var active = 0; 
 
document.body.style.transition = 'background-color 5000ms'; 
 
setInterval(function() { 
 
    document.body.style.backgroundColor = colors[active % colors.length]; 
 
    active++; 
 
}, 5000);