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;
}

任何建議將不勝感激。 謝謝，科爾茨

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;
 }

您還可以寫出CSS速記，以減少代碼行：

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