加載延遲動畫，不顯示

Question

我想在頁面加載時淡入我的徽標。但是，我希望它延遲。但是，當我添加延遲屬性時，它首先顯示，並在延遲期後開始動畫。我希望延遲之後顯示徽標。我究竟做錯了什麼？

這裏的的jsfiddle http://jsfiddle.net/c8hx9/

HTML

<div id="show">hello!</div> 

CSS

#show { 
position: absolute; 
left: 50%; 
margin-left: -200px; 
top: 200px; 
margin-bottom: 300px; 
animation: fadein 2s; 
-moz-animation: fadein 2s; 
/* Firefox */ 
-webkit-animation: fadein 2s; 
/* Safari and Chrome */ 
-o-animation: fadein 2s; 
/* Opera */ 
animation-delay:1s; 
-webkit-animation-delay:1s; 
} 
@keyframes fadein { 
from { 
    opacity:0; 
} 
to { 
    opacity:1; 
} 
} 
@-moz-keyframes fadein { 
/* Firefox */ 
from { 
    opacity:0; 
} 
to { 
    opacity:1; 
} 
} 
@-webkit-keyframes fadein { 
/* Safari and Chrome */ 
from { 
    opacity:0; 
} 
to { 
    opacity:1; 
} 
} 
@-o-keyframes fadein { 
/* Opera */ 
from { 
    opacity:0; 
} 
to { 
    opacity: 1; 
} 
} 

Answer 1

上的第一條語句類只需添加opacity：

#show { 
    opacity:0; 
} 

並保留最終的動畫使用forwards。

animation-fill-mode: forwards; 

檢查該演示http://jsfiddle.net/c8hx9/2/