Ritardo animazione CSS non funzionante

Question

Cercando di svanire in un div .... e 7 secondi dopo, sbiadire un altro div in. Non posso, per la vita di me, capire perché non funziona. Le animazioni stesse funzionano (le animazioni di fadein/fadeout), ma ho bisogno che il div "in corso" si dissolva dopo un determinato intervallo di secondi. Qualcuno sa come farlo correttamente?

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

} 

Grazie. Il violino è qui:

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

Answer 1

Usare il seguito per la classe .going. Lo forwards nella proprietà di animazione si assicurerà che il blocco non torni a opacity:0 (invisibile) dopo l'esecuzione dell'ultimo fotogramma chiave.

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

Quanto sopra è una scorciatoia per il ritardo di animazione.

Fiddle Demo

Answer 2

Il problema era sia con l'ordine ei nomi specifici mancante del browser:

Qualsiasi proprietà specifiche devono essere specificati dopo la linea più generale altrimenti saranno sovrascritte.

Lei è stato anche perdendo un primo opacity: 0 sul div in corso (che stava iniziando visibile)

Working fiddle

aggiornato con forwards grazie alla @Harry & @ VikasGhodke per la segnalazione

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

È possibile evitare l'intero stile specifico sovrascrivendo il problema delle impostazioni di stenografia includendo il ritardo dell'animazione nella sintassi stenografica in questo modo:

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

avete più di guidando un ritardo, non appena si imposta .. quindi specificare il ritardo dopo l'animazione .. ma poi un problema più sorgono .going sarà mostrato per primo poi, dopo il ritardo esso scompariranno e poi si presenta, che non è una buona pratica ..

check-out questa 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; 
} 

.210

Un'altra opzione è quella di giocare funzioni di temporizzazione e sincronizzazione ..

check-out questa 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 */ 
}