Плавное изменение цвета

// function gets three parameters:
// selector of an element the background of which we are changing, color to what value we are changing and the animation delay
function colorize(selector, toColor, delay) {
        // get element using the parameter "selector"
        var elem = document.querySelector(selector),
        // get an array of rgb-values as numbers from the element style
        fromColor = getComputedStyle(elem, '').backgroundColor
                    .split(/[^\d]/)
                    .filter(function(i) { return i !== ''; })
                    .map(function(i) { return +i; }),
        r_f = fromColor[0], g_f = fromColor[1], b_f = fromColor[2],
        r_t = toColor[0], g_t = toColor[1], b_t = toColor[2],
        // maximum difference between two same color channels use as a counter
        maxDiff = Math.max(Math.abs(r_t - r_f), Math.abs(g_t - g_f), Math.abs(b_t - b_f));
 
    var timer = setInterval(function() {
        if (maxDiff-- > 0) {
            r_f > r_t ? r_f-- : r_f++;
            g_f > g_t ? g_f-- : g_f++;
            b_f > b_t ? b_f-- : b_f++;
            // change background of the element with new values
            elem.style.backgroundColor = 'rgb('+ r_f + ',' + g_f + ',' + b_f + ')';
        } else {
            clearInterval(timer);
        }
    }, delay);
}