CSS动画延迟不起作用

Question

尝试淡入一个div .... 7秒后,淡入另一个div.我不能,因为我的生活,弄清楚为什么它不起作用.动画本身可以工作(fadein/fadeout动画),但我需要"go"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/

Answer 1

在.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;
}

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

小提琴演示

Answer 2

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

需要在更一般的行之后指定任何特定属性,否则将覆盖它们.

你也错过了前一个opacity: 0div 的初始值(它开始可见)

工作小提琴

与更新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;
}

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

小提琴

#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;
}