尝试淡入一个 div....7 秒后,淡入另一个 div。我无法弄清楚为什么它不起作用。动画本身有效(淡入/淡出动画),但我需要“进行中”的 div 在设定的秒数后淡入。有人知道如何正确执行此操作吗?
.coming{
width:320px;
height:auto;
position:absolute;
top:0px;
left:0px;
margin-left:10px;
background:#FFF;
color:#000;
font-family: Sans-Serif;
font-size:24px;
border-radius: 10px 10px 10px 10px;
-moz-box-shadow: 0px 0px 0px #000;
-webkit-box-shadow: 0px 0px 0px #000;
box-shadow: 1px 1px 5px #222;
padding:2px 20px;
}
#people .coming{
-moz-animation: fadein 3s ease-in; /* Firefox */
-webkit-animation: fadein 3s ease-in; /* Safari and Chrome */
-o-animation: fadein 3s ease-in; /* Opera */
animation: fadein 3s ease-in;
}
.going{
width:320px;
height:auto;
position:absolute;
top:120px;
left:0px;
margin-left:10px;
background:#FFF;
color:#000;
font-family: Sans-Serif;
font-size:24px;
border-radius: 10px 10px 10px 10px;
-moz-box-shadow: 0px 0px 0px #000;
-webkit-box-shadow: 0px 0px 0px #000;
box-shadow: 1px 1px 5px #222;
padding:2px 20px;
}
#people .going{
animation-delay: 7s;
-moz-animation: fadein 3s ease-in; /* Firefox */
-webkit-animation: fadein 3s ease-in; /* Safari and Chrome */
-o-animation: fadein 3s ease-in; /* Opera */
animation: fadein 3s ease-in;
}
谢谢。 fiddle 在这里:
最佳答案
将下面的内容用于您的 .going
类(class)。动画属性中的 forwards
将确保 block 在最后一个关键帧执行后不会返回到 opacity:0
(不可见)。
#people .going{
opacity: 0;
-moz-animation: fadein 3s ease-in 7s forwards; /* Firefox */
-webkit-animation: fadein 3s ease-in 7s forwards; /* Safari and Chrome */
-o-animation: fadein 3s ease-in 7s forwards; /* Opera */
animation: fadein 3s ease-in 7s forwards;
}
以上是做动画延迟的简写。
关于CSS 动画延迟不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18265846/