Javascript函数只运行一次

Question

我正在使用Javascript制作一个动画CSS3渐变，它可以工作......只有一次。我认为它与变量“percent1”和“percent2”有关。我无法弄清楚我的错误，如果有人能指出它会很好：

 function gradient() {
    var styles = document.getElementById("write"),
        styles2 = document.getElementById("write2"),
        percent1 = 0,
        percent2 = 0;

    styles.innerHTML = "<style> \n.liItem { \nbackground: linear-gradient(325deg, #FFD176 " + percent1 + "%, #85aaff " + percent2 + "%); \nbackground: -moz-linear-gradient(325deg, #FFD176 " + percent1 + "%, #85aaff " + percent2 + "%); \nbackground: -webkit-linear-gradient(325deg, #FFD176 " + percent1 + "%, #85aaff " + percent2 + "%); \nbackground: -o-linear-gradient(325deg, #FFD176 " + percent1 + "%, #85aaff " + percent2 + "%);\n}\n </style>";
    styles2.innerHTML = "";
    var liItem = new Array(document.getElementsByClassName("LiItem")[0], document.getElementsByClassName("LiItem")[1], document.getElementsByClassName("LiItem")[2]);

    liItem[0].onmouseover = function() {
        var liItemNumber = 0;
        var percent1 = 0,
            percent2 = 0;
        liItem[liItemNumber].className = liItem[liItemNumber].className + " liItemNumber";
        //window.alert(liItemNumber);
        interval1 = setInterval(animate, 5);
    }
        liItem[1].onmouseover = function() {
        var liItemNumber = 1;
        var percent1 = 0,
            percent2 = 0;
        liItem[liItemNumber].className = liItem[liItemNumber].className + " liItemNumber";
        //window.alert(liItemNumber);
        interval1 = setInterval(animate, 5);
    }
    liItem[2].onmouseover = function() {
        var liItemNumber = 2;
        var percent1 = 0,
            percent2 = 0;
        liItem[liItemNumber].className = liItem[liItemNumber].className + " liItemNumber";
        //window.alert(liItemNumber);
        interval1 = setInterval(animate, 5);
    }

    function animate() {
        if ((percent1 == 0) && (percent2 >= 0  && percent2 <= 5)) {
            styles2.innerHTML = "";
            percent2 = percent2 + 5;
        styles2.innerHTML = "<style> \n.liItemNumber { \nbackground: linear-gradient(325deg, #FFD176 " + percent1 + "%, #85aaff " + percent2 + "%); \nbackground: -moz-linear-gradient(325deg, #FFD176 " + percent1 + "%, #85aaff " + percent2 + "%); \nbackground: -webkit-linear-gradient(325deg, #FFD176 " + percent1 + "%, #85aaff " + percent2 + "%); \nbackground: -o-linear-gradient(325deg, #FFD176 " + percent1 + "%, #85aaff " + percent2 + "%);\n}\n </style>";
        }
        else if ((percent1 >= 0) && (percent2 >= 5  && percent2 <= 100)) {
            styles2.innerHTML = "";
            percent2 = percent2 + 5;
            percent1 = percent1 + 5;
        styles2.innerHTML = "<style> \n.liItemNumber { \nbackground: linear-gradient(325deg, #FFD176 " + percent1 + "%, #85aaff " + percent2 + "%); \nbackground: -moz-linear-gradient(325deg, #FFD176 " + percent1 + "%, #85aaff " + percent2 + "%); \nbackground: -webkit-linear-gradient(325deg, #FFD176 " + percent1 + "%, #85aaff " + percent2 + "%); \nbackground: -o-linear-gradient(325deg, #FFD176 " + percent1 + "%, #85aaff " + percent2 + "%);\n}\n </style>";
        }
        else if ((percent1 >= 95 && percent1 <=100) && (percent2 == 100)) {
            styles2.innerHTML = "";
            percent1 = percent1 + 5;
        styles2.innerHTML = "<style> \n.liItemNumber { \nbackground: linear-gradient(325deg, #FFD176 " + percent1 + "%, #85aaff " + percent2 + "%); \nbackground: -moz-linear-gradient(325deg, #FFD176 " + percent1 + "%, #85aaff " + percent2 + "%); \nbackground: -webkit-linear-gradient(325deg, #FFD176 " + percent1 + "%, #85aaff " + percent2 + "%); \nbackground: -o-linear-gradient(325deg, #FFD176 " + percent1 + "%, #85aaff " + percent2 + "%);\n}\n </style>";
        }
        else if ((percent1 == 100) && (percent2 == 100)) {
            styles2.innerHTML = "";
        liItem[liItemNumber].className = "";
        liItem[liItemNumber].className = "liItem";
        clearInterval(interval1);
        }
        else {
            styles2.innerHTML = "";
        clearInterval(interval1);
        }
    }
    }