Question

我正在使用css动画的网站上工作，我在使用firefox时遇到了一些麻烦在某些情况下，似乎firefox没有读取更新的css文件，而在其他地方css更新。我已经尝试了一些事情来清除缓存并进行了重新加载以查看css中的更改是否会反映在网站上。我甚至卸载并重新安装了Firefox。这是我遇到的。到目前为止，关键帧动画在chrome和safari中完美运行（避免IE头痛）。我注意到在测试中，firefox显示了一个大约100px以上的文本元素。浏览器特定代码中的所有值都相同。奇怪的是，如果我尝试使用firefox前缀更改任何值，它不会更改。假设原始顶部设置为10px，我将其更改为500px，firefox将其渲染到与10px相同的位置。我认为这可能是firefox没有重新加载css文件的问题的另一个原因是我试图评论动画文本的整个部分，它仍然会动画，好像我没有注释掉代码。在其他浏览器中，评论的动画根本不会动画。我通过将文本颜色更改为红色而不是白色来进行另一项测试，并且实际更新了更改。

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

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

感谢您的帮助。

这是jsfiddle链接。我可以添加屏幕截图，如果这有帮助，但jsfiddle可能是最容易看到我在说什么。 http://jsfiddle.net/JustALittleHeat/A5gMJ/1/

HTML

<body>
<div id= "aboutWrapper">
        <div id= "quoteContainer">
        <div id="quoteButton" class= "quoteButton" onclick="changeClass()"     
onmouseover="mouseOver()" onmouseout="mouseOut()">-</div>
        <h1 id="quotationMarks1" class="quotationMarks1">"</h1>
        <p id ="quote" class ="quote"><em><strong>&nbsp &nbsp &nbsp &nbsp THE BETTER THE   
PEOPLE YOU SURROUND YOURSELF WITH, THE BETTER YOU'RE GOING TO DO, FOR YOURSELF AND THE 
CONSUMER.</strong></em></p><h1 id="quotationMarks2" class="quotationMarks2">"</h1> <h2  
id="cecil" class="cecil">- Cecil Van Tuyl</h2>
    </div>
    <div id="aboutContainer" class="aboutContainer">
        <h1 class="pageParaHeader">About Us</h1>
        <p class="textBody"><strong class="dropCap">V</strong>&nbsp &nbsp &nbsp &nbsp an  
Tuyl Group, Inc. provides management consulting <br> &nbsp &nbsp &nbsp  &nbsp services 
to the largest group of privately held automotive dealerships in the United States. With 
offices in Arizona, Kansas, and Texas, the management consulting group works with 
approximately seventy independently operated dealerships nationwide.<br> <br> &nbsp 
&nbsp &nbsp &nbsp The Van Tuyl family has had a long history with the automotive 
industry, starting with Cecil Van Tuyl and a Kansas City Chevrolet dealership in 1955. 
Joined by his son Larry in 1971, they have built a world class management consulting 
company based on the principles of hiring the right people and giving their dealership 
clients the right tools, training and support they need to succeed.</p>
    </div>
</div>
</body>

CSS

    /*-------------Style Quote Block. NOT IE VERION-----------------------------*/


#aboutWrapper { position:relative; height:400px; width:100%; max-width:800px; margin-right:auto; margin-left:auto;
}

#quoteContainer {position:absolute;  padding-left:20px; margin-left:auto; margin-right:auto; width:800px; height:200px; 
}

.quoteButton {position:absolute; width:200px; height:30px;top:5px; z-index: 5; cursor:pointer; opacity:0;
}

.quoteButtonMin {position:absolute; width:200px; height:30px;top:5px; z-index: 5; cursor:pointer; opacity:0; color:#069ec7; font-size: 3em; line-height: 15px;

-webkit-animation: buttonMin 1s ease-in-out;
-webkit-animation-fill-mode: forwards;
-moz-animation: buttonMin 1s ease-in-out;
-moz-animation-fill-mode: forwards;
animation: buttonMin 1s ease-in-out; 
animation-fill-mode: forwards;
}



.quoteButtonMin:hover {color:#3ccaf0;}

.quote {position:absolute; width:800px;  color:white; font-size:2em; font-family:"Arial", sans-serif; top:15px; right:0px; 


-webkit-animation: quoteMove 2s ease-in-out;
-webkit-animation-delay:4s; 
-webkit-animation-fill-mode: forwards;
-moz-animation: quoteMove 2s ease-in-out;
-moz-animation-delay:4s; 
-moz-animation-fill-mode: forwards;
animation: quoteMove 2s ease-in-out; 
animation-delay:4s; 
animation-fill-mode: forwards;
}


.quotationMarks1 {position:absolute; color:#069ec7; font-family:Arial, sans-serif; font-size:10em; top:-103px; left:10px;

-webkit-animation: markMove1 2s ease-in-out; 
-webkit-animation-delay:4s; 
-webkit-animation-fill-mode: forwards;
-moz-animation: markMove1 2s ease-in-out; 
-moz-animation-delay:4s; 
-moz-animation-fill-mode: forwards;
animation: markMove1 2s ease-in-out; 
animation-delay:4s; 
animation-fill-mode: forwards;   
}

.quotationMarks2 {position:absolute; color:#069ec7; font-family:Arial, sans-serif; font-size:10em;
left:696px; top:-15px;  

-webkit-animation: markMove2 2s ease-in-out; 
-webkit-animation-delay:4s; 
-webkit-animation-fill-mode: forwards;
-moz-animation: markMove2 2s ease-in-out; 
-moz-animation-delay:4s; 
-moz-animation-fill-mode: forwards;
animation: markMove2 2s ease-in-out; 
animation-delay:4s; 
animation-fill-mode: forwards;    
}

.cecil {position:absolute; width:375px; color:white; font-family:Arial, sans-serif; font-size:3em; top:120px; left:340px;

-webkit-animation: cecilMove 2s ease-in-out; 
-webkit-animation-delay:4s; 
-webkit-animation-fill-mode: forwards;
-moz-animation: cecilMove 2s ease-in-out; 
-moz-animation-delay:4s; 
-moz-animation-fill-mode: forwards;
animation: markMove2 2s ease-in-out; 
animation-delay:4s; 
animation-fill-mode: forwards;  
}

/*--------------------------------------Button Minimize--------------------*/
@-webkit-keyframes buttonMin {
    0% {opacity:0; width:10px;}
    100%{opacity:1; width:10px;}
}

@-moz-keyframes buttonMin {
    0% {opacity:0; width:10px;}
    100%{opacity:1; width:10px;}
}

@keyframes buttonMin {
    0% {opacity:0; width:10px;}
    100%{opacity:1; width:10px;}
}

/*-----------------------------------Quote Animation------------------*/
@-webkit-keyframes quoteMove {
    0% {-webkit-transform:scale(1,1);opacity:1;}
    45% {opacity:1;}
    50% {-webkit-transform:scale(0,0);opacity:0;}
    100% {-webkit-transform:scale(0,0);opacity:0;}
}

@-moz-keyframes quoteMove {
    0% {-moz-transform:scale(1,1);opacity:1;}
    45% {opacity:1;}
    50% {-moz-transform:scale(0,0);opacity:0;}
    100% {-moz-transform:scale(0,0);opacity:0;}
}

@keyframes quoteMove {
    0% {transform:scale(1,1);opacity:1;}
    45% {opacity:1;}
    50% {transform:scale(0,0);opacity:0;}
    100% {transform:scale(0,0);opacity:0;}
}

/*--------------------------Quotation Marks 1------------------------------*/

@-webkit-keyframes markMove1 {
    0% {left:10px; top:103; -webkit-transform: scale(1,1);}
    50% {left:325px;top:-50px;-webkit-transform: scale(1,1);}
    90% {left:-5px;top:-50px;-webkit-transform: scale(0.45,0.45);}
    100% {left:-5px;top:-160px;-webkit-transform: scale(0.45,0.45);}
}

@-moz-keyframes markMove1 {
    0% {left:10px; top:103; -moz-transform: scale(1,1);}
    50% {left:325px;top:-50px;-moz-transform: scale(1,1);}
    90% {left:-5px;top:-50px;-moz-transform: scale(0.45,0.45);}
    100% {left:-5px;top:-160px;-moz-transform: scale(0.45,0.45);}
}

@keyframes markMove1 {
    0% {left:10px; top:103; transform: scale(1,1);}
    50% {left:325px;top:-50px;transform: scale(1,1);}
    90% {left:-5px;top:-50px;transform: scale(0.45,0.45);}
    100% {left:-5px;top:-160px;transform: scale(0.45,0.45);}
}

/*-------------------------Quotation Marks 2----------------------------*/

@-webkit-keyframes markMove2 {
    0% {left:696px; top:-15;-webkit-transform: scale(1,1);}
    50% {left:395px;top:-50px;-webkit-transform: scale(1,1);}
    90% {left:30px;top:-50px;-webkit-transform: scale(0.45,0.45);}
    100% {left:30px;top:-160px;-webkit-transform: scale(0.45,0.45);}
}

@-moz-keyframes markMove2 {
    0% {left:696px; top:-15;-moz-transform: scale(1,1);}
    50% {left:395px;top:-50px;-moz-transform: scale(1,1);}
    90% {left:30px;top:-50px;-moz-transform: scale(0.45,0.45);}
    100% {left:30px;top:-160px;-moz-transform: scale(0.45,0.45);}
}

@keyframes markMove2 {
    0% {left:696px; top:-15; transform: scale(1,1);}
    50% {left:395px;top:-50px; transform: scale(1,1);}
    90% {left:30px;top:-50px; transform: scale(0.45,0.45);}
    100% {left:30px;top:-160px; transform: scale(0.45,0.45);}
}

/*-----------------------------Cecil Move-------------------*/

@-webkit-keyframes cecilMove {
    0% {left:340px; top:120px; -webkit-transform: scale(1,1); }
    25% {left:490px;top:120px; -webkit-transform: scale(1,1);}
    50% {left:490px;top:40px; -webkit-transform: scale(1,1);}
    90% {left:-30px;top:63px; -webkit-transform: scale(0.35,0.35);}
    100% {left:-30px;top:-45px; -webkit-transform: scale(0.35,0.35);}
}


@keyframes cecilMove {
    0% {left:340px; top:120px; transform: scale(1,1); }
    25% {left:490px;top:120px; transform: scale(1,1);}
    50% {left:490px;top:40px; transform: scale(1,1);}
    90% {left:-30px;top:63px; transform: scale(0.35,0.35);}
    100% {left:-30px;top:-45px; transform: scale(0.35,0.35);}
}

@-moz-keyframes cecilMove {
    0% {left:340px; top:120px; -moz-transform: scale(1,1); }
    25% {left:490px;top:120px; -moz-transform: scale(1,1);}
    50% {left:490px;top:40px; -moz-transform: scale(1,1);}
    90% {left:-30px;top:63px; -moz-transform: scale(0.35,0.35);}
    100% {left:-30px;top:-45px; -moz-transform: scale(0.35,0.35);}
}


/*-------------------- Reverse Animation Classes-------------*/

.quoteR {position:absolute; width:800px;  color:white; font-size:2em; font-family:"Arial", sans-serif; top:15px; right:0px; 


-webkit-animation: quoteMoveR 2.5s ease-in-out;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: .45s;
-moz-animation: quoteMoveR 2.5s ease-in-out;
-moz-animation-fill-mode: forwards;
-moz-animation-delay: .45s;
animation: quoteMove 2.5s ease-in-out; 
animation-fill-mode: forwards;
animation-delay: .45s;
}


.quoteButtonMinR {position:absolute; width:200px; height:30px;top:5px; z-index: 5; cursor:pointer; opacity:1; color:#069ec7; font-size: 3em; line-height: 15px;

-webkit-animation: buttonMinR 1s ease-in-out;
-webkit-animation-fill-mode: forwards;
-moz-animation: buttonMinR 1s ease-in-out;
-moz-animation-fill-mode: forwards;
animation: buttonMinR 1s ease-in-out; 
animation-fill-mode: forwards;
}

.quotationMarks1R {position:absolute; color:#069ec7; font-family:Arial, sans-serif; font-size:10em; top:-103px; left:10px;

-webkit-animation: markMove1R 2.5s ease-in-out; 
-webkit-animation-fill-mode: forwards;
-moz-animation: markMove1R 2.5s ease-in-out; 
-moz-animation-fill-mode: forwards;
animation: markMove1R 2.5s ease-in-out; 
animation-fill-mode: forwards;   
}

.quotationMarks2R {position:absolute; color:#069ec7; font-family:Arial, sans-serif; font-size:10em;
left:696px; top:-15px;  

-webkit-animation: markMove2R 2.5s ease-in-out; 
-webkit-animation-fill-mode: forwards;
-moz-animation: markMove2R 2.5s ease-in-out; 
-moz-animation-fill-mode: forwards;
animation: markMove2 2.5s ease-in-out; 
animation-fill-mode: forwards;    
}

.cecilR {position:absolute; width:375px; color:white; font-family:Arial, sans-serif; font-size:3em; top:120px; left:340px;

-webkit-animation: cecilMoveR 2.5s ease-in-out; 
-webkit-animation-fill-mode: forwards;
-moz-animation: cecilMoveR 2.5s ease-in-out; 
-moz-animation-fill-mode: forwards;
animation: markMove2 2.5s ease-in-out; 
animation-fill-mode: forwards;  
}

/*-----------------------------Button Animation Reverse--------------------*/
@-webkit-keyframes buttonMinR {
    0%{opacity:1; width:10px;}
    100% {opacity:0; width:10px;}
}

@-moz-keyframes buttonMinR {
    0%{opacity:1; width:10px;}
    100% {opacity:0; width:10px;}
}

@keyframes buttonMinR {
    0%{opacity:1; width:10px;}
    100% {opacity:0; width:10px;}
}

/*--------------------------------Quote Reverse-----------------------------------*/
@-webkit-keyframes quoteMoveR {
    0% {-webkit-transform:scale(0,0);opacity:0;}
    50% {-webkit-transform:scale(0,0);opacity:0;}
    55% {opacity:1;}
    100% {-webkit-transform:scale(1,1);opacity:1;}
}

@-moz-keyframes quoteMoveR {
    0% {-moz-transform:scale(0,0);opacity:0;}
    50% {-moz-transform:scale(0,0);opacity:0;}
    55% {opacity:1;}
    100% {-moz-transform:scale(1,1);opacity:1;}
}

@keyframes quoteMoveR {
    0% {transform:scale(0,0);opacity:0;}
    50% {transform:scale(0,0);opacity:0;}
    55% {opacity:1;}
    100% {transform:scale(1,1);opacity:1;}
}

/*-----------------------------------Quotation Marks 1 Reverse-----------------*/
@-webkit-keyframes markMove1R {
    0% {left:-5px;top:-160px;-webkit-transform: scale(0.45,0.45);}
    10% {left:-5px;top:-50px;-webkit-transform: scale(0.45,0.45);}
    50% {left:325px;top:-50px;-webkit-transform: scale(1,1);}
    100% {left:10px; top:103; -webkit-transform: scale(1,1);}
}

@-moz-keyframes markMove1R {
    0% {left:-5px;top:-160px;-moz-transform: scale(0.45,0.45);}
    10% {left:-5px;top:-50px;-moz-transform: scale(0.45,0.45);}
    50% {left:325px;top:-50px;-moz-transform: scale(1,1);}
    100% {left:10px; top:103; -moz-transform: scale(1,1);}
}

@-keyframes markMove1R {
    0% {left:-5px;top:-160px;transform: scale(0.45,0.45);}
    10% {left:-5px;top:-50px;transform: scale(0.45,0.45);}
    50% {left:325px;top:-50px;transform: scale(1,1);}
    100% {left:10px; top:103;transform: scale(1,1);}
}

/*----------------------------------Quotation Marks 2 Reverse-------------------------------*/
@-webkit-keyframes markMove2R {
    0% {left:30px;top:-160px;-webkit-transform: scale(0.45,0.45);}
    10% {left:30px;top:-50px;-webkit-transform: scale(0.45,0.45);}
    50% {left:395px;top:-50px;-webkit-transform: scale(1,1);}
    100% {left:696px; top:-15;-webkit-transform: scale(1,1);}   
}

@-moz-keyframes markMove2R {
    0% {left:30px;top:-160px;-moz-transform: scale(0.45,0.45);}
    10% {left:30px;top:-50px;-moz-transform: scale(0.45,0.45);}
    50% {left:395px;top:-50px;-moz-transform: scale(1,1);}
    100% {left:696px; top:-15;-moz-transform: scale(1,1);}   
}

@keyframes markMove2R {
    0% {left:30px;top:-160px;transform: scale(0.45,0.45);}
    10% {left:30px;top:-50px;transform: scale(0.45,0.45);}
    50% {left:395px;top:-50px;transform: scale(1,1);}
    100% {left:696px; top:-15;transform: scale(1,1);}   
}

/*-----------------------------Cecil Move Reverse-----------------------------*/
@-webkit-keyframes cecilMoveR {
    0% {left:-30px;top:-45px;-webkit-transform: scale(0.35,0.35);}
    10% {left:-30px;top:63px;-webkit-transform: scale(0.35,0.35);}
    50% {left:490px;top:40px;-webkit-transform: scale(1,1);}
    75% {left:490px;top:120px;-webkit-transform: scale(1,1);}
    100% {left:340px; top:120px;-webkit-transform: scale(1,1); }    
}

@-moz-keyframes cecilMoveR {
    0% {left:-30px;top:-45px;-moz-transform: scale(0.35,0.35);}
    10% {left:-30px;top:63px;-moz-transform: scale(0.35,0.35);}
    50% {left:490px;top:40px;-moz-transform: scale(1,1);}
    75% {left:490px;top:120px;-moz-transform: scale(1,1);}
    100% {left:340px; top:120px;-moz-transform: scale(1,1); }    
}

@keyframes cecilMoveR {
    0% {left:-30px;top:-45px;transform: scale(0.35,0.35);}
    10% {left:-30px;top:63px;transform: scale(0.35,0.35);}
    50% {left:490px;top:40px;transform: scale(1,1);}
    75% {left:490px;top:120px;transform: scale(1,1);}
    100% {left:340px; top:120px;transform: scale(1,1); }    
}



/*-----------About Us IE Version Not setup-----------------------*/

.aboutContainer {position:relative; float:right; margin-right: 2.5%;width:400px; color:#069ec7; opacity:0;

-webkit-animation: aboutShow 2s ease-in-out; 
-webkit-animation-delay:5s; 
-webkit-animation-fill-mode: forwards;
-moz-animation: aboutShow 2s ease-in-out; 
-moz-animation-delay:5s; 
-moz-animation-fill-mode: forwards;
animation: aboutShow 2s ease-in-out; 
animation-delay:4s; 
animation-fill-mode: forwards;
}


.aboutContainerR {position:relative; float:right; margin-right: 2.5%;width:400px; color:#069ec7; opacity:0;

-webkit-animation: aboutShowR 2s ease-in-out; 
-webkit-animation-fill-mode:both;
-moz-animation: aboutShowR 2s ease-in-out; 
-moz-animation-fill-mode:both;
animation: aboutShowR 2s ease-in-out; 
animation-fill-mode: both;
}

.pageParaHeader {font-family: arial; font-size: 3em; color:#069ec7;   
}

.textBody {position: relative; margin-top: -20px; color:white;
}

.dropCap {position:absolute; font-size:2.5em; top:-4px;color:#069ec7;
}

@-webkit-keyframes aboutShow {
    0% {opacity:0;}
    75% {opacity:0;}
    100% {opacity:1;}
}

@-moz-keyframes aboutShow {
    0% {opacity:0;}
    75% {opacity:0;}
    100% {opacity:1;}
}

@keyframes aboutShow {
    0% {opacity:0;}
    75% {opacity:0;}
    100% {opacity:1;}
}

@-webkit-keyframes aboutShowR{
    0% {opacity:1;}
    25% {opacity:0;}
    100% {opacity:0;}
}

@-moz-keyframes aboutShowR{
    0% {opacity:1;}
    25% {opacity:0;}
    100% {opacity:0;}
}


@keyframes aboutShowR{
    0% {opacity:1;}
    25% {opacity:0;}
    100% {opacity:0;}
}

body {background:black;}

的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";

}

Answer 1

您只是忘了将动画名称从markMove2更改为cecilMove

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

Demo

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

Firefox不会更新CSS动画的更改

1 个答案: