html - 加载延迟动画，不显示

Question

我想在页面加载时淡入我的 Logo 。但是，我希望它延迟。但是当我添加 delay 属性时，它首先显示，并在延迟期后开始动画。我希望在延迟后显示 Logo 。我做错了什么？

这是 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/