CSS动画延迟不工作 [英] CSS Animation Delay Not Working

问题描述

尝试淡入一个div ...和7秒后，褪了另一个div。我不能，为了我的生活，找出为什么它不工作。动画本身工作（淡入/淡出动画），但我需要去div在设置的秒数后淡入。任何人都知道如何正确地这样做？

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?

.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 /

推荐答案

使用下面的 .going 类。动画属性中的 forward 将确保该块不返回 opacity：0 （invisible）最后一个关键帧执行后。

Use the below for your .going class. The forwards in the animation property will make sure that the block doesn't go back to opacity:0 (invisible) after the last key-frame is executed.

#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.

小提琴演示

这篇关于CSS动画延迟不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！