animation修改持续时间后动画效果不是规则运行

js中animation标签持续时间修改后动画效果不是规则运行 直接运行到结尾部分

var t = 0;
function carmove(x, y, a, b) {
            let s = getKeyframes('mymove');//通过封装的函数来获取名字为slide的keyframes函数
            s.styleSheet.deleteRule(s.index);//通过index删除之前的keyframes函数
            let insertKeyframes =
                '@@-webkit-keyframes mymove{\n' +
                '            0%{\n' +
                '                left: ' + x * autopx + 'px;top: ' + y * autopx + 'px;\n' +
                '            }\n' +
                '            100%{\n' +
                '                left: ' + a * autopx + 'px;top: ' + b * autopx + 'px;\n' +
                '            }\n' +
                '        }';
            s.styleSheet.insertRule(insertKeyframes, s.index);//将修改后的函数和index添加进样式表
        }

        mymove.addEventListener('webkitAnimationIteration', function () {
                    if (t < times) {
                        carmove(StartXs[t], StartYs[t], Xmove[t], Ymove[t]);
                        document.getElementById("mymove").style = "";
                        let cssstyle = "position: absolute;top: 0px;left: 0px;width: 50px;height: 50px;-webkit-animation-name:mymove;-webkit-animation-duration:" + bztime[t] + ";-webkit-animation-iteration-count:infinite;-webkit-animation-fill-mode:forwards;-webkit-animation-timing-function:ease;"
                        document.getElementById("mymove").style = cssstyle;
                        t++;
                    }

当动画持续时间相同时动画能够正常运行

在google浏览器上运行的

尝试了修改重新赋予css样式也没有效果 还是原来的动画效果