Javascript Firefox不会更新对CSS动画的更改

我在一个使用css动画的网站上工作，我在firefox上遇到了一些问题。
在某些情况下，firefox似乎没有读取更新的css文件，而在其他地方则没有读取css更新。我尝试了一些方法来清除缓存，并进行了硬加载，以查看css中的更改是否会反映在站点上。我甚至卸载并重新安装了firefox。以下是我遇到的情况。到目前为止，关键帧动画在chrome和safari中工作得非常完美（避免了IE带来的麻烦）。在测试firefox时，我注意到其中一个文本元素的位置应该在100px左右。浏览器特定代码中的所有值都相同。奇怪的是，如果我尝试使用firefox前缀更改任何值，它都不会更改。假设原始top设置为10px，我将其更改为500px，firefox将在10px的相同位置渲染它。我认为这可能是firefox没有重新加载css文件的问题的另一个原因是，我试图注释掉文本动画的整个部分，它仍然会像没有注释代码一样进行动画处理。在其他浏览器中，已注释的动画根本不会动画化。我做了另一个测试，把a文本的颜色改为红色而不是白色，这个变化实际上是更新的

此外，我使用javascript通过删除类并用反向动画类替换它来反向动画。这些在chrome和safari中也可以正常工作，但只有一个动画元素可以反向工作，但在firefox代码中不会将动画延迟更改为零

我可以用一双新鲜的眼睛看看到底发生了什么

谢谢你的帮助

这里是jsfiddle链接。如果有帮助的话，我可以添加屏幕截图，但是JSFIDLE可能是最容易看到我所说内容的。

HTML

Javascript

function changeClass() {


    if (document.getElementById("quotationMarks1").className === "quotationMarks1") 
   {document.getElementById("quotationMarks1").className = "quotationMarks1R";
    document.getElementById("quotationMarks2").className = "quotationMarks2R";
    document.getElementById("quote").className = "quoteR";
    document.getElementById("cecil").className = "cecilR";
    document.getElementById("aboutContainer").className ="aboutContainerR";
    document.getElementById("quoteButton").className ="quoteButtonMin";    
    }

    else {
        document.getElementById("quotationMarks1").className = "quotationMarks1";
        document.getElementById("quotationMarks2").className = "quotationMarks2";
        document.getElementById("quote").className = "quote";
        document.getElementById("cecil").className = "cecil";
        document.getElementById("aboutContainer").className ="aboutContainer";
        document.getElementById("quoteButton").className ="quoteButtonMinR";

        document.getElementById("quotationMarks1").style.webkitAnimationDelay = "0s";
        document.getElementById("quotationMarks2").style.webkitAnimationDelay = "0s";
        document.getElementById("quote").style.webkitAnimationDelay = "0s";
        document.getElementById("cecil").style.webkitAnimationDelay = "0s";
        document.getElementById("aboutContainer").style.webkitAnimationDelay = "0s";

        document.getElementById("quotationMarks1").style.mozAnimationDelay = "0s";
        document.getElementById("quotationMarks2").style.mozAnimationDelay = "0s";
        document.getElementById("quote").style.mozAnimationDelay = "0s";
        document.getElementById("cecil").style.mozAnimationDelay = "0s";
        document.getElementById("aboutContainer").style.mozAnimationDelay = "0s";

        document.getElementById("quotationMarks1").style.AnimationDelay = "0s";
        document.getElementById("quotationMarks2").style.AnimationDelay = "0s";
        document.getElementById("quote").style.AnimationDelay = "0s";
        document.getElementById("cecil").style.AnimationDelay = "0s";
        document.getElementById("aboutContainer").style.AnimationDelay = "0s";


        document.getElementById("quoteButton").className ="quoteButton";  
    }

}

function mouseOver() {
    document.getElementById("quotationMarks1").style.color = "#3ccaf0";
    document.getElementById("quotationMarks2").style.color = "#3ccaf0";
}

function mouseOut() {
    document.getElementById("quotationMarks1").style.color = "#069ec7";
    document.getElementById("quotationMarks2").style.color = "#069ec7";

}

---

您只是忘记将动画名称从

markMove2

更改为

cecilMove

.cecil { ... animation: cecilkMove2 2s ease-in-out; }

---

此外，您应该使用javascript变量来跟踪DOM元素，而不是每次都通过ID获取它们。它的性能更好，更易于维护，也更易于编写

感谢您的帮助，以及在javascript中使用变量而不是获取其文档id的提示。我看到的代码部分是错误的。我以为firefox是在读取其预先固定的动画语法，但它正在读取或应用标准的动画语法。javascript变量似乎不起作用。演示中是否缺少一些内容，因为它应该反转动画，并有一个鼠标悬停事件。@JustalitleHeat只需将JSFIDLE左侧的

No wrap-in

更改为

No wrap-in

。

function changeClass() {


    if (document.getElementById("quotationMarks1").className === "quotationMarks1") 
   {document.getElementById("quotationMarks1").className = "quotationMarks1R";
    document.getElementById("quotationMarks2").className = "quotationMarks2R";
    document.getElementById("quote").className = "quoteR";
    document.getElementById("cecil").className = "cecilR";
    document.getElementById("aboutContainer").className ="aboutContainerR";
    document.getElementById("quoteButton").className ="quoteButtonMin";    
    }

    else {
        document.getElementById("quotationMarks1").className = "quotationMarks1";
        document.getElementById("quotationMarks2").className = "quotationMarks2";
        document.getElementById("quote").className = "quote";
        document.getElementById("cecil").className = "cecil";
        document.getElementById("aboutContainer").className ="aboutContainer";
        document.getElementById("quoteButton").className ="quoteButtonMinR";

        document.getElementById("quotationMarks1").style.webkitAnimationDelay = "0s";
        document.getElementById("quotationMarks2").style.webkitAnimationDelay = "0s";
        document.getElementById("quote").style.webkitAnimationDelay = "0s";
        document.getElementById("cecil").style.webkitAnimationDelay = "0s";
        document.getElementById("aboutContainer").style.webkitAnimationDelay = "0s";

        document.getElementById("quotationMarks1").style.mozAnimationDelay = "0s";
        document.getElementById("quotationMarks2").style.mozAnimationDelay = "0s";
        document.getElementById("quote").style.mozAnimationDelay = "0s";
        document.getElementById("cecil").style.mozAnimationDelay = "0s";
        document.getElementById("aboutContainer").style.mozAnimationDelay = "0s";

        document.getElementById("quotationMarks1").style.AnimationDelay = "0s";
        document.getElementById("quotationMarks2").style.AnimationDelay = "0s";
        document.getElementById("quote").style.AnimationDelay = "0s";
        document.getElementById("cecil").style.AnimationDelay = "0s";
        document.getElementById("aboutContainer").style.AnimationDelay = "0s";


        document.getElementById("quoteButton").className ="quoteButton";  
    }

}

function mouseOver() {
    document.getElementById("quotationMarks1").style.color = "#3ccaf0";
    document.getElementById("quotationMarks2").style.color = "#3ccaf0";
}

function mouseOut() {
    document.getElementById("quotationMarks1").style.color = "#069ec7";
    document.getElementById("quotationMarks2").style.color = "#069ec7";

}

.cecil { ... animation: cecilkMove2 2s ease-in-out; }