CSS 动画延迟不起作用

尝试淡入一个 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/ http://jsfiddle.net/yZ4va/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;
}

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

小提琴演示 http://jsfiddle.net/yZ4va/35/