firefox中的CSS动画不起作用

   var ss = document.styleSheets;
        var rec;
        var bg = document.getElementById('bg');
        function getRule (name) {
            for(var i = 0; i<ss[0].cssRules.length; i++){
                if(ss[0].cssRules[i].name !== "undefined" && ss[0].cssRules[i].name === name)
                    return i;
            }
        }
        function swapNode(node){
            tmp = node.cloneNode(false);
            node.parentNode.removeChild(node);
            rec = tmp;
            bg.appendChild(rec);
        }
        function modifyRule(element, name, val){
            var browser = checkBrowser();
            console.log(browser);
            if(element.style.webkitAnimationPlayState === "paused")
                element.style.webkitAnimationPlayState = "running";
            var index = getRule(name);
            var rule = "";
            if(typeof index !== "undefined"){
                element.style.WebkitAnimationName = "none";
                element.style.WebkitAnimationName = name;               
                element.style.mozAnimationName = "none";
                element.style.mozAnimationName = name;
                ss[0].deleteRule(index);
                swapNode(element);
                if(name === "translate"){
                    rule = "@-"+browser+"-keyframes "+name+" {"+
                        "0% {-"+browser+"-transform: "+name+"(0px);}"+
                        "50% {-"+browser+"-transform: "+name+"("+val+");}"+
                        "100% {-"+browser+"-transform: "+name+"(0px);}}";           
                }
                else{
                    rule = "@-"+browser+"-keyframes "+name+" {"+
                        "100% {-"+browser+"-transform: "+name+"("+val+");}}";
                    console.log(rule); 
                }
                ss[0].insertRule(rule, index);              
            }
            else{
                console.log('err');
            }
        }
        function stopAnim (element) {
            element.style.WebkitAnimationPlayState = "paused";
        }
        function checkBrowser () {
            if(navigator.userAgent.indexOf("Chrome") != -1 ) 
            {
                return "webkit";
            }
            else if(navigator.userAgent.indexOf("Firefox") != -1 ) 
            {
                 return "moz";
            }
        }

        .container {
            position: relative;
            left: 40px;
            top: 50px;
            width: 240px;
            height: 150px;
        }
        #bg {
            width: 100%;
            height: 90px;
            background-color: #f3f3ff;
            border: solid;
            border-width: 1px;          
        }
        #recBlue{
            height: 50px;
            width: 50px;
            background-color: #aaaaff;
            border: solid;
            border-width: 3px;
            position: absolute;
            left: 35px;
            top: 20px;
            animation-duration: 2s;
            animation-timing-function: "bounce";
            animation-fill-mode: forwards;
            animation-name:translate;
            -webkit-animation-duration: 2s;
            -webkit-animation-timing-function: "bounce";
            -webkit-animation-fill-mode: forwards;
            -webkit-animation-name:translate;
           
        }
        #recRed{
            height: 50px;
            width: 50px;
            background-color: #ffaaaa;
            border: solid;
            border-width: 3px;
            position: absolute;
            left: 150px;
            top: 20px;
             animation-duration: 2s;
            animation-timing-function: "ease-in-out";
            animation-fill-mode: forwards;
            animation-iteration-count: infinite;
            animation-name:rotate;
            -webkit-animation-duration: 2s;
            -webkit-animation-timing-function: "ease-in-out";
            -webkit-animation-fill-mode: forwards;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-name:rotate;
           
        }
        #btn-grp{
            text-align: center;
        }       
        @-webkit-keyframes rotate {
        }           
        @-webkit-keyframes translate {
        }  
        @keyframes rotate {
        }           
        @keyframes translate {
        }       
  

    <div class="container">
        <div id="bg">
            <div id="recBlue">
            </div>
            <div id="recRed">
            </div>
        </div>
        <div id="btn-grp">
            <button id="clock" onclick='modifyRule(recBlue, "rotate", "100deg");'>></button>
            <button id="anticlock" onclick='modifyRule(recBlue, "rotate", "-100deg");'><</button>
            <button id="move" onclick='modifyRule(recRed, "translate", "-100px")'>></button>
            <button id="stop" onclick='stopAnim(recRed)'>#</button>
        </div>
    </div>

您没有定义动画名称-webkit-animation-name:rotate;和animation-name:rotate;。

希望它能帮助你。

问题解决了，动画名称的语法错误。

    element.style.MozAnimationName = "none";
    element.style.MozAnimationName = name;              
    element.style.animationName = "none";
    element.style.animationName = name;

是正确的。