.div1 {
    width: 100px;
    height: 100px;
    background: red;
    animation: changeColor 2s;
}
@keyframes changeColor {
    0% {background: red;}
    50% {background: yellow;}
    100% {background: blue;}
}

.div1 {
    width: 100px;
    height: 100px;
    background: red;
    animation: changeColor 2s forwards;
}
@keyframes changeColor {
    0% {background: red;}
    50% {background: yellow;}
    100% {background: blue;}            
}
.div2 {
    width: 100px;
    height: 100px;
    background: pink;
    animation: changeWidth 4s forwards;
}
@keyframes changeWidth {
    0% {width: 100px} 
    50% {width: 100px} 
    100% {width: 200px}            
}

var anim = [ 
    { // 動(dòng)畫對象，可以多個(gè)
        dom: document.getElementById('a1'), // dom對象
        anim: [ // 動(dòng)畫數(shù)組，里面可為多個(gè)對象
            {
                style: 'height', 
// 要改變的樣式名稱如width,height

                from: '10rem', // 樣式的起始值要和to保持一致
                to: '20rem', // 樣式的目標(biāo)值要和from保持一致
                start: 0, // 開始時(shí)間 毫秒
                end: 100, // 結(jié)束時(shí)間 毫秒
            },
            {
                style: 'width',
                from: '10rem',
                to: '20rem',
                start: 100,
                end: 200,
            },
            {
                style: 'transform',
                from: 'rotate(20deg)',
                to: 'rotate(40deg)',
                start: 0,
                end: 2000,
            }                        
        ]
    },
    {
        dom: document.getElementById('a2'),
        anim: [
            {
                style: 'background',
                from: 'rgba(0.0, 0.0, 0.0, 1)',
                to: 'rgba(255, 0, 100, 0.5)',
                start: 0,
                end: 3000,
            }
        ]
    },
];
timeLineAnim(anim, function () {
    console.log('animation finished');
});

function timeLineAnim(arr, cb) {
    /*
        initData: 對數(shù)據(jù)進(jìn)行初始化，將from、to中的信息轉(zhuǎn)為數(shù)字，計(jì)算出動(dòng)畫的個(gè)數(shù)

        setCss: 逐幀執(zhí)行，根據(jù)傳入的單個(gè)動(dòng)畫對象和每幀的時(shí)間間隔，計(jì)算出當(dāng)前幀的樣式，并修改元素的style值
    */
    function initData(obj) {
        var reg = /[\d\.]+/g;
        var numArrFrom = obj.from.match(reg);
        var numArrTo = obj.to.match(reg);
        if (!numArrFrom || !numArrTo || numArrFrom.length == 0 || numArrTo.length == 0 || numArrFrom.length != numArrTo.length) {
            console.warn('數(shù)據(jù)輸入錯(cuò)誤');
        }
        for (var i = 0; i < numArrFrom.length; i++) {
            numArrFrom[i] = parseFloat(numArrFrom[i]);
            numArrTo[i] = parseFloat(numArrTo[i]);
        }
        var strArr = obj.from.split(reg);
        if (numArrFrom.length <= 0) { return; };
        animCount++;
        return {
            strArr: strArr,
            numArrFrom: numArrFrom,
            numArrTo: numArrTo,
            totalLength: strArr.length + numArrFrom.length,
            isEnd: false,
        }
    }

    function setCss(obj, timeCount) {
        var styleStr = '';
        var tempCount = animCount;
        // 將對象的多個(gè)動(dòng)畫，根據(jù)時(shí)間計(jì)算出樣式，并合并
        for (var i = 0; i < obj.anim.length; i++) {
            var target = obj.anim[i];
            if (timeCount > target.start && !target.initData.isEnd) {
                // 根據(jù)起止時(shí)間 計(jì)算出當(dāng)前動(dòng)畫進(jìn)度
                var percent = (timeCount - target.start) / (target.end - target.start);
                if (percent >= 1) {
                    percent = 1;
                    target.initData.isEnd = true;
                    tempCount--;
                }
                styleStr += getValue(percent);
            }
        }
        obj.dom.style.cssText += ';' + styleStr;
        animCount = tempCount;
        // 這里進(jìn)行單個(gè)動(dòng)畫每幀樣式的生成，這里是勻速運(yùn)動(dòng)
        function getValue(percent) {
            var numFrom = target.initData.numArrFrom;
            var numTo = target.initData.numArrTo;
            var arr = [];
            for (var i = 0; i < numFrom.length; i++) {
                arr.push(numFrom[i] + (numTo[i] - numFrom[i]) * percent);
            }
            var numIndex = 0;
            var strIndex = 0;
            var turnForNum = false;
            var str = target.style + ':';
            for (var i = 0; i < target.initData.totalLength; i++) {
                if (turnForNum) {
                    str += arr[numIndex];
                    numIndex++;
                    turnForNum = false;
                }
                else {
                    str += target.initData.strArr[strIndex];
                    strIndex++;
                    turnForNum = true;
                }
            }
            return str + ';';
        }
    }

    // 主體邏輯: 初始化數(shù)據(jù)、幀動(dòng)畫、動(dòng)畫結(jié)束執(zhí)行回調(diào)
    var animCount = 0;
    for (var i = 0; i < arr.length; i++) {
        for (var j = 0; j < arr[i].anim.length; j++) {
            arr[i].anim[j].initData = initData(arr[i].anim[j]);
        }
    }
    this.timer && cancelAnimationFrame(this.timer);
    var _this = this;
    (function animate(timeCount) {
        if (animCount > 0) {
            for (var i = 0; i < arr.length; i++) {
                setCss(arr[i], timeCount);
            }
            _this.timer = requestAnimationFrame(animate);
        }
        else {
            cancelAnimationFrame(_this.timer);
            cb && cb();
        }
    })();
}