CSS Animation Delay Not Working

Question

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;

}

Thank you. The fiddle is here:

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

Answer 1

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.

Fiddle Demo

Answer 2

The problem was with both the order and the missing browser specific names:

Any specific properties need to be specified after the more general line otherwise they will be overridden.

You were also missing an initial opacity: 0 on the going div (it was starting visible)

Working fiddle

Updated with forwards thanks to @Harry & @ VikasGhodke for pointing that out

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

You can avoid the whole specific style overwriting the shorthand settings issue by including the animation delay in the shorthand syntax like so:

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

Answer 3

You are over riding a delay as soon as you set it.. so specify your delay after your animation.. but then one more problem arise .going will shown up first then after delay it will dissapear and then shows up which is not a good practice..

check out this fiddle

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

Another option is to play around timing and timing functions..

check out this fiddle

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