Question

好的，我有这个文字，我希望在20多岁后出现。我正在使用动画延迟属性，但它无法正常工作。也许，我做错了。

请帮助我走上正确的轨道..

这是我的代码..

@import url(http://fonts.googleapis.com/css?family=Economica);
#text{
font-family:'Economica', sans-serif;
font-weight:bold;
position:absolute;
left:50%;
top:50%;
margin-left:-20px;
margin-top:-25px;
animation:fade-in 5s;
animation-delay:15s;
-webkit-animation-delay:15s;
-webkit-animation:fade-in 5s;


}

@keyframes fade-in{
from { opacity:0;}
to {opacity:1;}
}

@-webkit-keyframes fade-in{
from {opacity:0;}
to {opacity:1;}
}

以下是Fiddle

上的链接

感谢您的一切！

编辑一：

更改动画属性的顺序，并在文本中添加不透明度：0后，我得到以下内容

#text{
font-family:'Economica', sans-serif;
position:absolute;
left:50%;
top:50%;
opacity:0;
margin-left:-20px;
margin-top:-25px;
animation:fade-in 2s;
animation-delay:3s;
-webkit-animation:fade-in 2s;
-webkit-animation-delay:3s;
-o-animation:fade-in 2s;
-o-animation-delay:3s;

}

@keyframes fade-in{
from { opacity:0;}
to {opacity:1;}
}

@-webkit-keyframes fade-in{
from {opacity:0;}
to {opacity:1;}
}

但是如果我在#text中将不透明度保留为0，那么一旦动画结束，文本就会消失。

如何在动画完成后保持文本可见？

谢谢！

Answer 1

您已按错误的顺序指定了-webkit个版本。 -webkit-animation替换您刚刚设置的延迟规则。颠倒顺序，以便延迟到来。

-webkit-animation:fade-in 5s;
-webkit-animation-delay:15s;

如果您始终设置单个属性，则可以避免这些问题：

-webkit-animation-name: fade-in;
-webkit-animation-duration: 5s;
-webkit-animation-delay: 15s;

别忘了也设置：

opacity: 0;

否则文本将在动画开始前可见，并且：

-webkit-animation-fill-mode: forwards;

这样在淡入后保留动画不透明度。

Answer 2

您需要在之后放置animation-delay规则，因为速记会将您的值重置为默认值0s - 或者您可以将其放置在简写：

#text { -moz-animation: fade-in 5s 15s; -webkit-animation: fade-in 5s 15s; animation: fade-in 5s 15s; }

http://jsfiddle.net/wXdbL/2/（将延迟更改为1，因此很明显）

动画延迟不起作用

2 个答案: