8

尝试淡入一个 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;

}

谢谢你。小提琴在这里：

http://jsfiddle.net/yZ4va/1/

4

3 回答 3

16

将以下内容用于您的.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;
}

以上是做动画延迟的简写。

小提琴演示

于 2013-08-16T05:01:13.530 回答
7

问题在于订单和缺少的浏览器特定名称：

任何特定属性都需要在更通用的行之后指定，否则它们将被覆盖。

您还缺少opacity: 0正在进行的 div 的首字母（它开始可见）

工作小提琴

感谢@Harryforwards和@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;
}

您可以通过在速记语法中包含动画延迟来避免整个特定样式覆盖速记设置问题，如下所示：

小提琴

#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;
}
于 2013-08-16T04:53:34.260 回答
1

你一设置延迟就结束了..所以在你的动画之后指定你的延迟..但随后又出现了一个问题.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 */
}
于 2013-08-16T04:59:12.243 回答