Question

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

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/

动画加载延迟，没有显示

1 个答案: