加载延迟动画，不显示

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/