CSS 动画延迟不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18265846/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Animation Delay Not Working
提问by Ian Providence
Trying to fade in one div....and 7 seconds later, fade another div in. I cannot, for the life of me, figure out why it's not working. The animations themselves work (the fadein/fadeout animations) but I need the "going" div to fade in after a set amount of seconds. Anyone know how to do this correctly?
试图淡入一个 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;
}
Thank you. The fiddle is here:
谢谢你。小提琴在这里：
回答by Harry
Use the below for your .goingclass. The forwardsin the animation property will make sure that the block doesn't go back to opacity:0(invisible) after the last key-frame is executed.
将以下内容用于您的.going课程。该forwards动画属性将确保该块不回去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;
}
The above is short-hand for doing animation delay.
以上是做动画延迟的简写。
回答by dc5
The problem was with both the order and the missing browser specific names:
问题在于订单和缺少的浏览器特定名称：
Any specific properties need to be specified after the more general line otherwise they will be overridden.
任何特定属性都需要在更通用的行之后指定，否则它们将被覆盖。
You were also missing an initial opacity: 0on the going div (it was starting visible)
您还丢失opacity: 0了正在运行的 div 上的首字母（它开始可见）
Updated with forwardsthanks to @Harry & @ VikasGhodke for pointing that out
更新forwards感谢@Harry & @ VikasGhodke 指出这一点
#people .going{
-moz-animation: fadein 3s ease-in forwards; /* Firefox */
-webkit-animation: fadein 3s ease-in forwards; /* Safari and Chrome */
-o-animation: fadein 3s ease-in forwards; /* Opera */
animation: fadein 3s ease-in forwards;
-moz-animation-delay: 7s;
-webkit-animation-delay: 7s;
-o-animation-delay: 7s;
animation-delay: 7s;
}
You can avoid the whole specific style overwriting the shorthand settings issue by including the animation delay in the shorthand syntax like so:
您可以通过在速记语法中包含动画延迟来避免整个特定样式覆盖速记设置问题，如下所示：
#people .going{
-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;
}
回答by Vikas Ghodke
You are over riding a delay as soon as you set it.. so specify your delay after your animation.. but then one more problem arise .going will shown up first then after delay it will dissapear and then shows up which is not a good practice..
一旦你设置了延迟，你就超过了延迟..所以在你的动画之后指定你的延迟..但是又出现了一个问题.going将首先显示然后延迟后它会消失然后显示这不是一个好实践..
check out this fiddle
看看这个小提琴
#people .going{
-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;
-webkit-animation-delay: 7s;
animation-delay: 7s;
}
Another option is to play around timing and timing functions..
另一种选择是玩弄计时和计时功能..
check out this fiddle
看看这个小提琴
.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{
animation: fadein 10s ease-in-out;
-moz-animation: fadein 10s ease-in-out; /* Firefox */
-webkit-animation: fadein 10s ease-in-out; /* Safari and Chrome */
-o-animation: fadein 10s ease-in-out; /* Opera */
}
