css动画工作铬和safari不在mozilla

Question

我是一个CSS新手。我该如何让这个CSS动画在Firefox和Chrome中都能正常工作。目前它在Chrome和Safari中工作，但不在Firefox中。

我到目前为止所尝试的是我添加了-moz-前缀的动画属性（动画和关键帧）。问题是，例如，当我在@ -webkit-keyframes加载栏{..}之前首先加载@ -moz-keyframes加载栏{.....}，则动画在Firefox中运行，但不在Chrome和Safari中运行。如果我再次更改代码的放置位置，即使我拥有@ -moz-keyframes加载栏{...}，它也可以在Chrome和Safari中使用，但不能在Firefox中使用。我怎么解决这个问题？我觉得Chrome，Safari和Firefox正在争先恐后地将代码与他们的前缀名称放在一起。以下是不带-moz-前缀的代码。

#progresscontainer { 
 
\t margin-top: 15px; 
 
\t width: 100%; 
 
\t text-align: center; 
 
} 
 

 
#progressbar { 
 
     background-color: #2C3E50; 
 
     border-radius: 1px; 
 
     padding: 3px; 
 
     width: 500px; 
 
     margin-left: auto; 
 
     margin-right: auto; 
 
    } 
 

 
    #progressbar div { 
 
     background-color: #E74C3C; 
 
     height: 10px; 
 
     width:0%; 
 
     border-radius: 1px; 
 
     -webkit-animation:loadbar 4s; 
 
     animation:loadbar 2s; 
 
     -webkit-animation-fill-mode: forwards; 
 
     animation-fill-mode: forwards; 
 
     -webkit-animation-delay: 3s; 
 
     animation-delay: 3s; 
 
    } 
 

 
    @-webkit-keyframes loadbar { 
 

 
    0% { 
 
     width: 0%; 
 
    } 
 

 
    100% { 
 
     width: 3.5%; 
 
    } 
 

 
    
 
    @keyframes loadbar { 
 

 
    0% { 
 
     width: 0%; 
 
    } 
 

 
    100% { 
 
     width: 3.5%; 
 
    }

<div id="progresscontainer"> 
 
     <div id="progressbar"> 
 
     <div></div> 
 
     </div> 
 
     <p style="color: yellow; font-family: Helvetica; margin-top: 4px; background-color: black; 
 
     opacity: 0.6; width: 150px; margin: 0 auto; margin-top: 3px">Progress</p> 
 
</div>

Answer 1

您还需要

@-moz-keyframes loadbar{ 
    0% { 
     width: 0%; 
    } 

    100% { 
     width: 3.5%; 
    } 
} 

还需要你的关键帧后，关闭您的括号：

@-webkit-keyframes loadbar { 

    0% { 
     width: 0%; 
    } 

    100% { 
     width: 3.5%; 
    } 
} 


@keyframes loadbar { 

    0% { 
     width: 0%; 
    } 

    100% { 
     width: 3.5%; 
    } 
} 

记住还有@ -ms- IE和老Opera的关键帧和@ -o-keyframes。