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。