CSS動畫適用於Chrome和Safari，但不適用於Firefox和Internet Explorer

Question

我在我的網站上運行了一個簡單的css動畫，它應該簡單地在不同的時間在我的網頁的各個部分淡入淡出。不幸的是，我的頁面的這一方面僅適用於Chrome和Safari，但不適用於Firefox和IE。 在做了一些小小的研究之後，我包含了淡入淡出時間的單位值，但是結果沒有改善。這是下面的CSS：

a { 
    text-decoration: none; color: #FFFFFF; position: relative; 
    transition: all 0.25s linear; 
    -moz-transition: all 0.25s linear; 
    -webkit-transition: all 0.25s linear; 
    -o-transition: all 0.25s linear; 
} 


/*Animations*/ 
@-webkit-keyframes FADEY { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 

.intro { 
    -webkit-animation-name: FADEY; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-iteration-count: 1; 
} 


[role="article"] { 
    -webkit-opacity: 0; 
    -webkit-animation-name: FADEY; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-delay: 0.5s; 
    -webkit-animation-fill-mode: forwards; 
    -webkit-animation-iteration-count: 1; 
} 


.design-selection, .design-archives { 
    -webkit-opacity: 0; 
    -webkit-animation-name: FADEY; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-delay: 1s; 
    -webkit-animation-fill-mode: forwards; 
    -webkit-animation-iteration-count: 1; 
} 

任何意見將不勝感激。 謝謝， choltz

Answer 1

您目前擁有用於動畫的Webkit供應商前綴，-webkit。這就是爲什麼它僅適用於基於Webkit的瀏覽器，例如Chrome和Safari。對於舊版本的Firefox，您還需要添加-moz-。目前的Firefox和當前的Internet Explorer只使用真實版本animation，沒有前綴。

.intro { 
    -webkit-animation-name: FADEY; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-iteration-count: 1; 
    -moz-animation-name: FADEY; 
    -moz-animation-duration: 1s; 
    -moz-animation-timing-function: ease-in-out; 
    -moz-animation-iteration-count: 1; 
    animation-name: FADEY; 
    animation-duration: 1s; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: 1; 
} 

你也可以寫出來的簡寫，以代碼行減少：

-webkit-animation:FADEY 1s 1 ease-in-out; 
-moz-animation:FADEY 1s 1 ease-in-out; 
animation:FADEY 1s 1 ease-in-out;