CSS firefox 中的动画不工作

Question

我在让 CSS 动画在 firefox 浏览器中正常工作时遇到问题。我尝试使用 "moz" - 前缀，但没有 success.The 动画在 chrome 中按预期工作，请参见下面的代码。

var ss = document.styleSheets;
var rec;
var bg = document.getElementById('bg');
function getRule (name) {
 var indexArr = [];
 for(var i = 0; i<ss[0].cssRules.length; i++){
  if(ss[0].cssRules[i].name !== "undefined" && ss[0].cssRules[i].name === name){
   indexArr.push(i);
  }
 }
 return indexArr;
}
function swapNode(node){
 tmp = node.cloneNode(false);
 node.parentNode.removeChild(node);
 rec = tmp;
 bg.appendChild(rec);
}
function modifyRule(element, name, val){
 var browser = checkBrowser();
 // if(element.style.webkitAnimationPlayState === "paused")
 //  element.style.webkitAnimationPlayState = "running";

 var indexes = getRule(name);
 var rule = [];

 if(indexes.length){
  element.style.WebkitAnimationName = "none";
  element.style.WebkitAnimationName = name;    
  element.style.mozAnimationName = "none";
  element.style.mozAnimationName = name;    
  element.style.AnimationName = "none";
  element.style.AnimationName = name;
  
  
  swapNode(element);
  
  if(name === "translate"){
   rule[0] = "@-"+browser+"-keyframes "+name+" {"+
    "0% {-"+browser+"-transform: "+name+"(0px);}"+
    "50% {-"+browser+"-transform: "+name+"("+val+");}"+
    "100% {-"+browser+"-transform: "+name+"(0px);}}";

   rule[1] = "@keyframes "+name+" {"+
    "0% {transform: "+name+"(0px);}"+
    "50% {transform: "+name+"("+val+");}"+
    "100% {transform: "+name+"(0px);}}";   
  }
  else{
   rule[0] = "@-"+browser+"-keyframes "+name+" {"+
    "100% {-"+browser+"-transform: "+name+"("+val+");}}";
   rule[1] = "@keyframes "+name+" {"+
    "100% {transform: "+name+"("+val+");}}";

  }
  for(var i = 0; i<indexes.length; i++){
   console.log(rule[i]);
   ss[0].deleteRule(indexes[i]);
   ss[0].insertRule(rule[i], indexes[i]);    
   
  }
  
  
  
 }
 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;

    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: "bounce";
    -webkit-animation-fill-mode: forwards;
    -moz-animation-duration: 2s;
    -moz-animation-timing-function: "bounce";
    -moz-animation-fill-mode: forwards;

}
#recRed{

    height: 50px;
    width: 50px;
    background-color: #ffaaaa;
    border: solid;
    border-width: 3px;
    position: absolute;
    left: 150px;
    top: 20px;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: "ease-in-out";
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;

}
#btn-grp{
    text-align: center;
}       
@-webkit-keyframes rotate {

}           
@-webkit-keyframes translate {

}           
@-moz-keyframes rotate {

}           
@-moz-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>

如有任何帮助，我们将不胜感激！

Answer 1

   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;。

希望对您有所帮助。

Answer 2

问题解决，是animationname语法错误

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

正确。

CSS firefox 中的动画不工作

CSS animation in firefox not working

html

javascript

css

firefox