动画延迟不起作用

Posted

技术标签:

【中文标题】动画延迟不起作用【英文标题】:animation delay not working 【发布时间】:2013-08-20 16:55:15 【问题描述】:

好的,我有这个想要在 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上的链接

感谢您所做的一切!

编辑一个:

更改动画属性的顺序,并在文本中添加 opacity: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,那么动画结束后文本就会消失。

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

谢谢!

【问题讨论】:

【参考方案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;

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

【讨论】:

如果我设置不透明度为0,动画结束后文字会消失! 好的,我知道了!我必须包括动画填充模式:前进;所以动画继续进行。【参考方案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/(把延迟改成1s这样就很明显了)

【讨论】:

以上是关于动画延迟不起作用的主要内容,如果未能解决你的问题,请参考以下文章

Swift:for循环中延迟的动画不起作用?

UIView animateKeyframes 不起作用

为啥延迟()不起作用?

延迟解析 JavaScript 不起作用

为啥延迟加载在一对一关联中不起作用?

数据表延迟加载不起作用