在非Chrome瀏覽器中動畫的問題

Question

我有一些jQuery正在爲下面的動畫成功添加所需的類。

1）首先，下面的動畫只在Chrome中播放。我的IE（版本11.0）和Firefox（32.0.3）根本不播放動畫。 2）其次，如果我沒有'不透明度：1'，在我的動畫類中，該元素將退色爲不透明度0（其原始值）。有沒有更好的方式讓它停留在動畫的最終值而不必將其設置在動畫中？在動畫類中設置元素的屬性似乎有點不直觀，因爲它不明確何時生效（在關鍵幀之前，之後）。

HTML：

<!-- Appear after 1 second --> 
<h1 data-appear='1'>1</h1> 

CSS：

h1 { 
    opacity: 0; 
} 

@-webkit-keyframes appear { 
    0% { opacity: 0; } 
    50% { opacity: 0; } 
    100% { opacity: 1; } 
} 
@-moz-keyframes appear { 
    0% { opacity: 0; } 
    50% { opacity: 0; } 
    100% { opacity: 1; } 
} 
@-o-keyframes appear { 
    0% { opacity: 0; } 
    50% { opacity: 0; } 
    100% { opacity: 1; } 
} 
@keyframes appear { 
    0% { opacity: 0; } 
    50% { opacity: 0; } 
    100% { opacity: 1; } 
} 

.appear.delay1 { 
    animation-duration: 1s; 
    -o-animation-duration: 1s; 
    -moz-animation-duration: 1s; 
    -webkit-animation-duration: 1s; 

    animation: appear; 
    -o-animation-name: appear; 
    -moz-animation-name: appear; 
    -webkit-animation-name: appear; 

    opacity: 1; 
} 

Answer 1

1）的CSS規則的順序中的祕密所在。您在定義持續時間時尚未定義動畫。如果我切換順序我的作品在最新的Firefox：

.appear.delay1{ 

    animation: appear; 
    -o-animation: appear; 
    -moz-animation: appear; 
    -webkit-animation: appear; 

    animation-duration: 1s; 
    -o-animation-duration: 1s; 
    -moz-animation-duration: 1s; 
    -webkit-animation-duration: 1s; 
} 

2）你不需要，如果你定義填充的方式來定義不透明度。使用填充模式，您可以指定動畫完成時動畫的狀態。在這種情況下，您希望100％粘貼，所以您應該將填充模式設置爲轉發。

-o-animation-fill-mode: forwards; 
-moz-animation-fill-mode: forwards; 
-webkit-animation-fill-mode: forwards; 
animation-fill-mode: forwards; 

我在下面撥弄拼湊一起：

http://jsfiddle.net/mxa377m4/