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; bord…

Accepted Answer

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

CSS Animation Delay Not Working

Solution

Problem