CSS动画延迟不起作用
CSS动画延迟不起作用
提问于 2013-08-16 12:34:34
尝试在7秒后淡入一个div....and，淡入另一个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;
}谢谢。小提琴在这里：
http://jsfiddle.net/yZ4va/1/
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-08-16 13:01:14
为您的.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;
}上面是动画延迟的速记。
Stack Overflow用户
发布于 2013-08-16 12:53:34
问题在于订单和缺少的浏览器特定名称：
任何特定的属性都需要在更一般的行后指定，否则它们将被覆盖。
您还在正在进行的div上丢失了一个初始opacity: 0 (它开始是可见的)
Working fiddle
感谢@Harry &@ VikasGhodke指出了这一点，并通过forwards进行了更新
#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;
}您可以通过在速记语法中包含动画延迟来避免整个特定样式覆盖速记设置问题，如下所示：
Fiddle
#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;
}Stack Overflow用户
发布于 2013-08-16 12:59:12
一旦你设置了延迟，你就不再需要延迟了..所以在你的动画之后指定你的延迟。但是，还有一个问题出现了，.going将首先出现，然后在延迟后消失，然后出现，这不是一个好的实践。
查看此
#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;
}另一种选择是使用计时和计时函数。
查看此
.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 */
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18265846
复制相关文章
相似问题
腾讯云开发者
