javascript - Firefox 不会更新对 CSS 动画的更改

标签 javascript html css firefox animation

我在一个使用 css 动画的网站上工作，但我在使用 firefox 时遇到了一些问题。
在某些情况下，firefox 似乎没有读取更新的 css 文件，而在其他地方则没有读取 css 更新。我尝试了一些方法来清除缓存并重新加载以查看 css 中的更改是否会反射(reflect)在网站上。我什至卸载并重新安装了 Firefox。这是我遇到的。到目前为止，关键帧动画在 chrome 和 safari 中完美运行(避免了 IE 的麻烦)。我在测试 firefox 时注意到，其中一个文本元素比它应该在的位置高出大约 100 像素。所有值在浏览器特定代码中都是相同的。奇怪的是，如果我尝试使用 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";

}

最佳答案

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

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

Demo

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

关于javascript - Firefox 不会更新对 CSS 动画的更改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22055070/

上一篇：HTML DIV 与它所在的 DIV 相矛盾

下一篇：javascript - 单击时使用 Jquery 上下动画 div

相关文章：

javascript - Angular 提示缺少一个根本没有声明的模块我

javascript - 处理动态输入组

javascript - jQuery 列添加排序

android - HTML 中的可滚动内容不会在 Android 模拟器或手机中滚动

javascript - 如何在div内部对齐div中间

javascript - 网络动画结束后恢复原状

javascript - 在 webhook 嵌入中使用 base64 图像的discordjs

javascript - IE7 不读取 CSS 和 JS 包

javascript - 查询。如果选中复选框，则检查 onload 并将 css 添加到 div

javascript - D3 svg 路径重叠

©2024 IT工具网  联系我们